how to override css in Vue component

user_14668139 0
Viewed 4104

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!

vue.js css
2 Answers

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.

user_69119520

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.

user_97660240
Related