title: How to disable the hover effect of Vuetify data tables?
body: <p>The data tables from Vuetify have a hover effect by default. I found this CSS class applied when I check for the table row,</p>
  
  <pre><code>.theme--light.v-data-table tbody tr:hover:not(.v-data-table__expanded__content) {
      background: #eee;
  }
  </code></pre>
  
  <p>So it seems that this adds the background color to the table row. But when I add this scoped CSS to the Vuetify component,</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="items"
      :disable-sort="true"
      hide-default-footer
      :item-key="itemKey"
    &gt;
      &lt;template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"&gt;
        &lt;slot :name="slot" v-bind="scope" /&gt;
      &lt;/template&gt;
    &lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "BaseDataTable",
    props: {
      headers: Array,
      items: Array,
      itemKey: {
        type: String,
        default: "id"
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .theme--light.v-data-table
    tbody
    tr:hover:not(.v-data-table__expanded__content) {
    background: #fff;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>It does literally nothing with the new CSS I've added. Even when I add <code>!important</code> 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.</p>