如何在 Vuetify <v-data-table> 行上将“光标”设置为“指针”？

Question

如何cursor: pointer在 Vuetify<v-data-table>行上设置？

我在组件中尝试了以下代码，但无法识别：

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

Answer 1

我终于以这种方式修复了它：

</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

这就是您如何使用自定义 CSS 选择器覆盖 v-data-table 组件的行。接受的答案仅适用于范围内的样式。

<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>