Vuetify v-simple-table行样式：自定义任务状态关联hover效果

问题原因 #

Vuetify的v-simple-table自带默认行hover样式，且优先级通常比自定义类更高；如果你的样式是scoped的，Vue还会自动添加属性选择器进一步提升内置样式优先级，导致自定义hover样式无法生效。

具体解决方法 #

1. 使用深度选择器（适用于scoped样式）

如果样式写在Vue单文件组件的scoped标签里，必须用深度选择器穿透Vuetify内置样式：

<style scoped>
.greenBG {
  background-color: #79ecc5;
}
.whiteBG {
  background-color: white;
}

/* 用::v-deep穿透覆盖行hover */
::v-deep tr.greenBG:hover {
  background-color: green;
}

/* 若默认hover样式作用在td上，需针对td设置 */
::v-deep tr.greenBG:hover td {
  background-color: green;
}
</style>

也可以用/deep/或>>>替代::v-deep，不同Vue版本支持情况略有差异，::v-deep是更通用的写法。

2. 提高选择器特异性（适用于非scoped样式）

如果样式不是scoped的，直接用更具体的选择器覆盖默认样式：

.v-simple-table tbody tr.greenBG:hover {
  background-color: green;
}

通过增加父类选择器（.v-simple-table tbody）提升自定义样式的优先级，比单独写tr.greenBG:hover更容易覆盖内置样式。

3. 临时方案：用!important（不推荐但有效）

如果上述方法都不生效，可以临时用!important强制覆盖：

tr.greenBG:hover {
  background-color: green !important;
}

注意：尽量少用!important，会增加后续样式维护的复杂度。

内容的提问来源于stack exchange，提问作者mikeym