css - 如何覆盖 vuetify 样式？

Question

我想按类覆盖 vuetify 样式。

例如从 vuetify 更改按钮的背景颜色。

因此，我创建了一个带有类的按钮:

<div id="app">
  <v-btn class="some" color="success">Success</v-btn>
</div>

.some {
background-color:red;
}

但是背景色红色被 vuetify 覆盖了。

如何在不使用 important 和 themes 的情况下解决这个问题？

这里是例子:https://stackblitz.com/edit/vue-js-gpkj6k

Answer 1

对于 vue 和作用域元素，您将遇到/deep/、>>>、::v-deep 选择器。一切都解释清楚there .因此，如果您想深入覆盖样式，这意味着您需要使用 ::v-deep 选择器和 scoped 选择器作为根 vuetify 组件的子样式属性。

这给你:

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

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

希望这对您有所帮助。