设置颜色属性时未应用 Vuetify 活动类答案

【问题标题】：Vuetify active class not applied when Color attribute is set设置颜色属性时未应用 Vuetify 活动类
【发布时间】：2020-06-20 05:34:42
【问题描述】：

在设置颜色属性时，将活动类应用于选定的 V-Card 元素时遇到一些问题：

例子：

<v-col v-for="data in datas" :key="data.id">
<v-card
  style="height: 10vh;"
  flat
  dark
  color="green" // <--- When set my selectedItem Class is not applied
  @click="doSomething(), activeId=data.id"
  :class="{ 'selectedItem' : activeId === data.id}"
>
{{ data.id }}
</v-card>

<style scoped>
.selectedItem {
  background-color: blue !important;
}
</style>

当未应用颜色属性且背景为白色时， selectedItem 类工作正常！

可能是什么问题？

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案1】：

当您在 Vuetify 中使用颜色属性时，您在 CSS 中应用的背景颜色比您应用的类具有更高的特异性。您可以检查您的检查器输出以查看此行为。

因为颜色会以.v-application 作为父选择器应用其样式。如果你想在你的样式表中与之竞争，你可以这样做：

.v-application .selectedItem {
 background: blue !important
}

【讨论】：