CODEWITHSUNDEEP
cssvue.js
user14668139
user14668139

Reputation: 23

how to override css in Vue component

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!

Upvotes: 2

Views: 7765

Answers (3)

Rajaruban Rajindram
Rajaruban Rajindram

Reputation: 1006

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.

Upvotes: 1

Imre Ujlaki
Imre Ujlaki

Reputation: 335

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.

Upvotes: 2

catmal
catmal

Reputation: 1758

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.

Upvotes: 3

Related Questions