How to disable the hover effect of Vuetify data tables?

问题

The data tables from Vuetify have a hover effect by default. I found this CSS class applied when I check for the table row,

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

So it seems that this adds the background color to the table row. But when I add this scoped CSS to the Vuetify component,

<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>

It does literally nothing with the new CSS I've added. Even when I add !important after the background. Can someone tell me why the new CSS rules don't work or even don't get applied? Because I can't even see them in the console.

回答1:

For Vuetify 1.5 use:

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

回答2:

I forgot to use the deep selectors:

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

Now the styling gets applied to all the Data Tables. If someone has any further explanation feel free to answer this question.

回答3:

This is my solution

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

来源：https://stackoverflow.com/questions/60487217/how-to-disable-the-hover-effect-of-vuetify-data-tables

标签

css

vuetify.js