How to Override Scoped Styles in Vue Components

How to override scoped styles in Vue components?

After playing around a bit, I think I've got a good approach.

1. Global overrides

   For situations where I want to override the rules in all cases for CompB I can add a rule-set with more specificity like this: #app .compb-header { .. }. Since we always only have one root (#app) it's safe to use an ID in the rule-set. This easily overrides the scoped rules in CompB.

2. Parent overrides

   For situations where I want to override both the global and scoped rules. Thankfully VueJS allows adding both a scoped and unscoped style block into a .Vue file. So I can add an even more specific CSS rule-set. Also notice I can pass a class into CompB's props since Vue provides built-in class and style props for all components:

   // in CompA (the parent)
   
   <template>
     ...
     <!-- Vue provides built-in class and style props for all comps -->
     <compb class="compb"></compb>  
   </template>
   
   <script>
     ...
   </script>
   
   <style lang="scss">
     #app .compb .compb-header { 
       color: red; 
     }
   </style>
   
   <style lang="scss" scoped>
     ...
   </style>
   

   (note: You can get more specific and make the class you pass into CompB have a more unique name such as .compa-compb or some hash suffix so there is no potential for collision with other components that use CompB and a class .compb. But I think that might be overkill for most applications.)

3. And of course CompB may provide its own additional props for adjusting CSS or passing classes/styles into areas of the component. But this may not always be the case when you use a component you don't own (unless you fork it). Plus, even with this provided, there is always those situations where you are like "I just want to adjust that padding just a bit!". The above two solutions seem to work great for this.

how to override css in Vue component

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.

Override CSS for specific Bootstrapvue Components

This works:

<style lang="scss">
.btn-group-toggle:not(#_) label {
  /* general styles */
  &.disabled {
  }
  &.focus {
  }
  &.active {
  }
  &:hover {
  }
}
</style>

When adding scoped attribute to the <style> tag, you're largely at the hand of your installed pre-processor which might or might not be able to parse >>>, /deep/, ::v-deep or :deep(), depending on version.

To stay away from such issues, I use the suggestion made in Vue Loader's docs: I create a separate <style> tag for bootstrap-vue internals, without the scoped attribute and keep the rest of component style rules in a <style scoped>.

Working demo.

Scoped Styles are always overwritten

The problem here is that your child-component's root element is a section

By design, a parent component is able to style the child components root.
In general this is used so you can easily style a child component, add margin, padding etc. But in your case it is conflicting.

What you see:

<template>
  <div>
    <section>...</section>
    <your-component></your-component>
  </div>
</template>

What your scoped css sees:

<template>
  <div>
    <!-- I can style out here -->
    <section>...</section>
    <section>
    <!-- But I can't style in here -->
    </section>
  </div>
</template>

The scoped css knows not to go INTO the component, but the components root as basically at the level that it is allowed to style, and since it's a section, the css selector is valid.

If you just wrap your child component like this, there will be no conflict:

<template>
  <div>
    <section>...</section>
  </div>
</template>

You can also style them with different classes etc.

Here is the official docs on it.

---

Related Topics