css - 如何禁用Vuetify数据表的悬停效果？

Question

Vuetify 中的数据表默认具有悬停效果。当我检查表格行时，我发现应用了这个 CSS 类，

.theme--light.v-data-table tbody tr:hover:not(.v-data-table__expanded__content) {
    background: #eee;
}

因此，这似乎为表格行添加了背景颜色。但是当我将这个作用域 CSS 添加到 Vuetify 组件时，

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :disable-sort="true"
    hide-default-footer
    :item-key="itemKey"
  >
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "BaseDataTable",
  props: {
    headers: Array,
    items: Array,
    itemKey: {
      type: String,
      default: "id"
    }
  }
};
</script>

<style scoped>
.theme--light.v-data-table
  tbody
  tr:hover:not(.v-data-table__expanded__content) {
  background: #fff;
}
</style>

它对我添加的新 CSS 没有任何作用。即使我在背景后添加 !important 。谁能告诉我为什么新的CSS规则不起作用甚至不适用？因为我什至无法在控制台中看到它们。

Answer 1

对于 Vuetify 1.5 使用:

.v-table tr:hover:not(.v-table__expanded__content) {
  background: red !important;
}