Css 如何在悬停状态下设置Vuetify v-data-table行的背景色？

如何设置

的背景色属性

我尝试了这一方法，但没有使用

作用域

属性，它也会影响组标题行：

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

.theme--light.v-data-table>.v-data-table\uuuuu包装器>table>tbody>tr:hover:not（.v-data-table\uuuu扩展内容）：not（.v-data-table\uuu空包装器）{
背景颜色：绿色；
}

使用

的

项

槽，并将您的类添加到该自定义表行元素中

{{item.property1}}
{{item.property2}
{{item.property3}

.green bg{
/*将显示设置为'table row'，因为Vuetify生成'flex'*/
显示：表格行；
}
.绿色背景：悬停{
/*“！important”在此处是必需的，因为Vuetify会覆盖此选项*/
背景：绿色！重要；
}

---

下面是一个示例演示。

使用

的

项
槽，并将您的类添加到该自定义表行元素中


{{item.property1}}
{{item.property2}
{{item.property3}

.green bg{
/*将显示设置为'table row'，因为Vuetify生成'flex'*/
显示：表格行；
}
.绿色背景：悬停{
/*“！important”在此处是必需的，因为Vuetify会覆盖此选项*/
背景：绿色！重要；
}


这里是一个示例演示。
可能是其他CSS影响了该元素。请使用Codesandbox发布您的代码演示。我刚刚更新了我的帖子，它确实有效，但不是很好。可能是其他CSS影响了元素。请使用Codesandbox发布您的代码演示。我刚刚更新了我的帖子，它确实有效，但不是很好。