覆盖 vue-vuetify 项目中的特定 css 属性

Question

我在我的 vuejs 项目中使用 vuetify，我的场景是这样的。

当我使用 v-card 时，我每次都想要 box-shadow: 3px 3px 30px #95959522;，为此我在我的主 css 文件中将其覆盖为

.v-card {
    box-shadow: 3px 3px 30px #95959522 ;
}

但是如果我使用v-card flat 或v-card raised 等默认属性，那么我肯定想要带有指定属性的box-shadow，但目前所有的v-card 都定义了box-shadow上面，扁平和凸起的道具不再可用

Answer 1

您可以使用:not 关键字排除flat、raised 或任何其他情况。

.v-sheet.v-card:not(.v-card--raised):not(.v-card--flat) {
  box-shadow: 3px 3px 30px #959595;
}