Vuetify styles not applied when styles inside scoped

2
votes

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>
1
vue.jsvuetify.js

1 Answers

9
votes

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