【问题标题】: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
    }
    

    【讨论】:

      猜你喜欢
      • 2020-05-31
      • 2019-09-04
      • 2015-02-24
      • 1970-01-01
      • 2020-05-11
      • 2020-06-08
      • 2018-10-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多