How to disable the hover effect of Vuetify data tables?

user_7603806 0
Viewed 21997

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.

vuetify.js css
6 Answers

This is my solution

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

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.

user_76038060

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

user_15243160

For Vuetify 1.5 use:

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

I solved this giving the table an id="mytable" and:

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

This is working for me:

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