how to override css in Vue component

Question

I have drop-down in vue component and class of that element is "form-control" and it has it's own styles. I need to override the styles of that class. for that I have done coding as follows (in vue component),

<style scoped>
.form-control{
  border-radius: 50px !important;
  color: #823F98 !important;
  border: 1px solid #3FA294 !important;
}
</style>

but this one didn't work for me. so, how to override it?

Thank you!

Your vue component has the other vue component inside? If that's the case, "scoped" styles will not leak into child components. — azeós
– azeós, Commented Nov 27, 2020 at 6:08
yeah. the dropdown is another vue component and I am using that component in another vue component. so, is there any way to ovrride the styles? — user14668139
– user14668139, Commented Nov 27, 2020 at 6:11

catmal · Accepted Answer · 2020-11-27 06:51:32Z

3

You should remove scoped. If you leave scoped it will not apply on other components including those you import.

Or move that css in app.css or app.scss.

answered Nov 27, 2020 at 6:51

catmal

1,7581 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user14668139 Over a year ago

I have tried removing the scoped and it works for me. is it affect other parts of the project??

catmal Over a year ago

It affects all elements using that .form-control class

Imre Ujlaki · Accepted Answer · 2020-11-27 09:23:21Z

2

Using unscoped style can be very dangerous especially general class names like form-control.

I think it's a better way to use deep styles in your parent component:

<style scoped>
>>>.form-control{
  border-radius: 50px !important;
  color: #823F98 !important;
  border: 1px solid #3FA294 !important;
}
</style>

but if you can refactor your child component and add a props like formControlStyle with your CSS styles would be the best solution to avoid side effects. You can add a default value to this prop that is your styles in your child component.

answered Nov 27, 2020 at 9:23

Imre Ujlaki

3351 silver badge4 bronze badges

Comments

Rajaruban Rajindram · Accepted Answer · 2023-01-02 20:10:27Z

1

Use Deep Selector, ie, :deep(.whatever-style-name) you want to override in your current component

<style scoped>
:deep(.form-control) {
  border-radius: 50px;
  color: #823F98;
  border: 1px solid #3FA294;
}
</style>

by doing this, you can remove the need to use '!important' in every line of css codes that needs overiding.

Refer here in the Vue official docs for more info.

edited Jan 2, 2023 at 20:10

answered Dec 16, 2022 at 4:56

Rajaruban Rajindram

1,0368 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to override css in Vue component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related