How to disable the hover effect of Vuetify data tables?

Question

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.

Answer 1

This is my solution

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

Answer 2

If you're using Vue CLI then you can modify this using SASS/SCSS variables too.

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

This overrides Vuetify's table hover styles for example .. What's useful are some additional variables which you can find on the API page for the specific component you want to modify. An example for data-table: https://vuetifyjs.com/en/api/v-data-table/#sass-variables