How to set "cursor" to "pointer" on Vuetify <v-data-table> rows?

Question

How to set cursor: pointer on Vuetify <v-data-table> rows ?

I tried the code below in my component, but it's not recognized:

<style lang="css" scoped>
tr:hover {
  cursor: pointer;
}
</style>

Answer 1

I finally fixed it this way:

</template>
<v-data-table class="row-pointer"></v-data-table>
<template>

<style lang="css" scoped>
.row-pointer >>> tbody tr :hover {
  cursor: pointer;
}
</style>

Answer 2

This is how you can override the rows of v-data-table component with a custom css selector. The accepted answer only works in scoped stlyes.

<template>
  <v-data-table class="row-pointer" ...></v-data-table>
</template>

<style> 
.row-pointer > .v-data-table__wrapper > table > tbody > tr:hover {  
  cursor: pointer;
}
</style>