Vuetify активный класс не применяется, когда установлен атрибут Color

Question

У меня есть некоторые проблемы с применением активного класса к выбранному элементу 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>

Когда атрибут color не применяется и фон белый, класс selectedItem работает нормально!

В чем может быть проблема?

Answer 1

Когда вы используете атрибут цвета в Vuetify, вы применяете цвет фона в CSS с более высоким уровнем специфичности, чем применяемый класс. Вы можете проверить вывод инспектора, чтобы увидеть это поведение.

Поскольку цвет будет применять свой стиль с .v-application в качестве родительского селектора. Если вы хотите конкурировать с этим в своей таблице стилей, вы можете сделать это:

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