How to set the background color of Vuetify v-data-table row on hover?

How to set background color attribute of <v-data-table> ?

I tried this which works, but not with scoped attribute and it also affect group header rows:

<style lang="css">
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
    background-color: green;
}
</style>

Use the item slot of <v-data-table/> and add your class to that custom table row element.

<v-data-table ...>

  <template v-slot:item="{item}">
    <tr class="green-bg">
      <td>{{item.property1}}</td>
      <td>{{item.property2}}</td>
      <td>{{item.property3}}</td>
    </tr>
  </template>

</v-data-table>

.green-bg {
  /* Set the display to `table-row` because Vuetify makes `flex` */
  display: table-row;
}

.green-bg:hover {
  /* `!important` is necessary here because Vuetify overrides this */
  background: green !important; 
}

Here is a sample demo at codesandbox.