Bootstrap主题下ngx-datatable单元格鼠标悬停样式修改问题

我之前在使用Bootstrap主题的ngx-datatable时也碰到过一模一样的问题——激活状态的颜色改起来很顺利，但悬停样式死活不生效。其实核心问题是ngx-datatable的内部样式有优先级，我们需要用更精准的CSS选择器来覆盖它。

下面是几种可行的方法，按推荐程度排序：

方法1：使用高优先级选择器（推荐） #

直接针对Bootstrap主题下的单元格悬停类写样式，确保选择器优先级超过组件默认样式。你可以把这段代码放到全局样式文件（比如styles.css/styles.scss）里：

.ngx-datatable.bootstrap .datatable-body-row .datatable-body-cell:hover {
  background-color: #f5f5f5; /* 替换成你想要的悬停颜色，示例里的灰色就是这个值 */
  /* 可选：添加鼠标指针样式，提升交互感 */
  cursor: pointer;
}

之所以要加这么多层前缀，是因为Bootstrap主题的ngx-datatable会给容器加上.ngx-datatable.bootstrap类，这样写能确保我们的样式优先级比组件自带的.datatable-body-cell:hover更高。

方法2：在组件内用::ng-deep穿透样式封装 #

如果你的样式只想作用在当前组件内的ngx-datatable，可以用Angular的::ng-deep来穿透组件的样式隔离（注意：虽然Angular官方不推荐过度使用，但在这种第三方组件样式覆盖场景下非常实用）：

::ng-deep .ngx-datatable.bootstrap .datatable-body-row .datatable-body-cell:hover {
  background-color: #e9ecef;
}

记得把这段代码放在组件的style.scss/style.css里，而不是全局样式文件。

方法3：万不得已时用!important（不推荐） #

如果上面两种方法都不生效，可能是你的Bootstrap样式优先级特别高，这时候可以临时用!important强制覆盖，但尽量避免，因为它会打乱样式优先级体系：

.datatable-body-cell:hover {
  background-color: #f5f5f5 !important;
}

测试的时候记得刷新页面，有时候Angular的样式缓存会导致修改不生效。如果还是没效果，可以打开浏览器的开发者工具（F12），选中悬停的单元格，查看它的CSS样式，看看你的自定义样式有没有被应用，或者被哪个更高优先级的样式覆盖了，然后调整选择器即可。

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