CODEWITHSUNDEEP
vue.jsvuetify.js
Lavaraju
Lavaraju

Reputation: 2808

Vuetify styles not applied when styles inside scoped

I am usig Vue.js in this i am applied inspect v-data-table claSS BASED I gave styles but not applying.

<style lang="scss" scoped>
.v-toolbar__title {
  color: indigo;
}
v-data-table-header{
  background:  rgba(0, 0, 0, .05);
}

tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .05);
}
</style>

Upvotes: 4

Views: 5185

Answers (1)

Satyam Pathak
Satyam Pathak

Reputation: 6912

You need to use ::v-deep to change scoped styles

Try

::v-deep .v-data-table-header{
  background:  rgba(0, 0, 0, .05);
}

Read more about deep selectors here - https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Upvotes: 21

Related Questions