如何修改BootstrapVue b-table的行悬停颜色为红色？

问题排查与修复步骤 #

• 修正CSS语法错误：你的样式代码里，闭合大括号}写在了<style>标签外面，导致样式无法被正确解析，先把这个错误修正。
• 处理Vue样式作用域问题：如果代码是在Vue单文件组件中，<style>标签默认带有scoped属性，这会让自定义样式无法穿透到BootstrapVue组件内部的DOM结构，需要使用深度选择器来解决。

正确代码示例 #

单文件组件（带scoped）的写法 #

<template>
  <div>
    <b-table class="table-sm table-hover" fixed bordered striped></b-table>
  </div>
</template>

<style scoped>
/* 使用Vue深度选择器穿透作用域 */
:deep(.table-hover tbody tr:hover td),
:deep(.table-hover tbody tr:hover th) {
  background-color: red !important;
}
</style>

非scoped样式的写法（不推荐，易造成样式污染） #

如果去掉scoped属性也能生效，但样式会全局作用，可能影响其他组件：

<template>
  <div>
    <b-table class="table-sm table-hover" fixed bordered striped></b-table>
  </div>
</template>

<style>
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: red !important;
}
</style>

额外说明 #

• 深度选择器的写法根据Vue版本略有不同：Vue 3推荐使用:deep()，Vue 2可使用::v-deep或/deep/，根据项目环境选择即可。
• !important是为了覆盖Bootstrap默认的悬停样式，若深度选择器优先级足够，可尝试去掉!important。

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