How to Override Vuetify Styles

how to overwrite vuetify.js style

In Vue you can use scoped styles to make sure a style only applies to current component. This allows you to use deep selector.

<style scoped>
.v-textarea >>> .v-input__slot:before {
  border-style: none;
}
</style>

You can also use the usual css parent/child selector > without scoped styles.

<style>
.v-textarea > .v-input__control > .v-input__slot:before {
  border-style: none;
}
</style>

Another way to not affect all v-textareas globally is to use a custom class.

<v-textarea class="my-textarea"></v-textarea>
<style>
.my-textarea > .v-input__control > .v-input__slot:before {
  border-style: none;
}
</style>

How to apply custom/override CSS on Vuetify component?

Add a css class inside the component:

<style scoped>
.text-field{
    color: #90C143 !important; /* this will override the existing property applied */
    /* add whatever properties you want */
}
</style>

Then in the component add this to class instead of color property:

<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">

You can use only the predefined classes given in vuetify documentation.

If you want to use custom color on the color property you can set your
own theme in Vuetify object in main.js:

Vue.use(Vuetify)

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#90C143',
        secondary: '#b0bec5',
        anchor: '#8c9eff',
      },
    },
  },
})

Now you can use the specified theme overrides in any component:

<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">

You can alternatively apply CSS globally in app.vue:

<style>
/* don't use scoped css */

.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
    border-color: #90C143;
}

.theme--light.v-label {
    color: #90C143;
}

.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
    color: #90C143;
}
</style>

Override Vuetify styling with .less file

The first thing that you should check is, when your .less files are loaded. If you want to overwrite the Vuetify styling, then your .less file has to be loaded after the Vuetify styling.

The second thing is, there may be some Vuetify stylings which are using the !important rule. This will automatically overwrite your styling, if it's not laoded after the Vuetify styling and also includes the !important rule.

Last but not least, if the Vuetify stylings don't use the !important rule, you can think about using it to overwrite the Vuetify styling yourself. But bare in mind, that you should prevent using !important anywhere you can. It should only be used, if there really is no other option to solve a problem.

Overriding Vuetify variables

Actually the solution is, and I'm dumb for not thinking of this before, to add another loader to vue.config.js:

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    },
    sass: {
      prependData: `@import '@/sass/_vuetify-variables.sass';`
    }
  }
},

Since vuetify is using sass as the css pre-processor, it needs sass-loader to handle the variable overrides and apply it to the framework.

---

Related Topics