如何自定义ngx-datatable行CSS？hover样式不生效求解

你的样式不生效核心原因是Angular组件的样式隔离机制——默认情况下组件内的CSS无法穿透到ngx-datatable这类第三方组件的内部DOM元素，再加上ngx-datatable自身默认样式优先级较高，导致自定义样式无法生效。可以通过以下几种方案解决：

1. 使用::ng-deep穿透样式隔离 #

在组件的CSS文件中添加::ng-deep前缀，强制样式穿透到嵌套的第三方组件DOM：

::ng-deep .datatable-body-row:hover {
  background-color: #3387b5 !important;
}

• ::ng-deep会临时禁用当前组件的样式隔离，让样式作用到内部的ngx-datatable元素。
• !important用于覆盖ngx-datatable默认的悬停样式优先级，如果不加仍不生效可以尝试添加。

2. 针对单元格元素设置样式 #

部分场景下，ngx-datatable的行背景实际由内部单元格（.datatable-body-cell）控制，此时需要调整选择器：

::ng-deep .datatable-body-row:hover .datatable-body-cell {
  background-color: #3387b5;
}

可以通过浏览器开发者工具（F12）查看行和单元格的DOM结构，确认实际需要设置样式的元素。

3. 在全局样式中定义（适合全局统一场景） #

如果需要所有ngx-datatable都应用该样式，可在项目全局样式文件（如styles.scss）中直接添加：

.datatable-body-row:hover {
  background-color: #3387b5;
}

这种方式会影响所有使用ngx-datatable的组件，不推荐仅局部组件需要的场景。

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