如何禁用Vuetify数据表的hover效果？

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规则无法工作或者根本没有被应用吗？因为我甚至在控制台中都看不到它们。

- Baspa

Answer 1

这是我的解决方案

<style lang="scss">  
  tbody {
     tr:hover {
        background-color: transparent !important;
     }
  }
</style>

- JPilson

---

在最新的Vuetify上完美运行 - 干杯 - megachill

Answer 2

如果您使用Vue CLI，也可以使用SASS/SCSS变量进行修改。

$material-light: (
  'table': (
    'active': map-get($grey, 'lighten-4'),
    'hover': transparent, // <<<<<<<<< THIS HERE <<<<<<<<<
    'group': map-get($grey, 'lighten-4')
  )
);

这将覆盖Vuetify表格的悬停样式，例如.. 有用的是一些额外的变量，您可以在要修改的特定组件的API页面上找到。 以data-table为例：https://vuetifyjs.com/en/api/v-data-table/#sass-variables

- trainoasis

Answer 3

我忘记使用深度选择器：

<style scoped>
.v-data-table
  /deep/
  tbody
  /deep/
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}
</style>

现在样式已经应用于所有数据表格。如果有人有更进一步的解释，请随意回答这个问题。

- Baspa

---

您能提供代码的托管示例吗？还请注意，/deep/即将被弃用，请使用::v-deep替代。 - Frank Furter

@FrankFurter，由于某些原因，::v-deep和>>>无法工作，但/deep/可以。你能解释一下为什么吗？我可以尝试在CodeSandBox上制作一个示例。 - Baspa

可能取决于您正在使用的Sass处理器库，我相信sass和dart-sass已经弃用了>>>和/deep/。请参见https://github.com/vuejs/vue-loader/issues/913。 - Frank Furter

这也是我解决问题的方式，但是使用sass（dart-sass）的::v-deep。你可以编写全局CSS，而不必使用深度选择器，但如果要在特定组件中使用时覆盖悬停样式，则需要采用这种方法。为了使其与.theme--dark一起工作，我建议将background:inherit设置为背景。 - Excalibaard

Answer 4

对于Vuetify 1.5，请使用：

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

- Jar

Answer 5

这对我有效：

这是适用于我的：

.v-data-table >>> tr:hover {
  background: transparent !important;
}

- Zarwell

Answer 6

我给表格加上了 id="mytable" 并解决了这个问题：

<style scoped>
#mytable >>> tr:hover {
  background: transparent !important;
}
</style>

- Anton vBR