Sometimes, we want to override Vuetify styles with Vue.js.

In this article, we’ll look at how to override Vuetify styles with Vue.js.

How to override Vuetify styles with Vue.js?

To override Vuetify styles with Vue.js, we can add scoped styles with the deep selector.

For instance, we write

<style scoped>
.parent-element >>> .vuetify-class {
  // ...
}
</style>

<style lang="scss" scoped>
  .vuetify-class {
    ::v-deep other-class {
      // ...
    }
  }
</style>

to add the scoped attribute to styles to keep the styles applied to the current component only.

And then we use >>> or ::v-deep to select the Vuetify class with the styles we want to override.

Conclusion

To override Vuetify styles with Vue.js, we can add scoped styles with the deep selector.