如何为ngx-datatable选中行添加自定义CSS样式？

你之前用:checked伪类设置选中行样式无效，核心原因是:checked仅适用于checkbox、radio这类表单控件，而ngx-datatable的选中行是通过给行元素添加特定CSS类来标识的，并非表单控件的选中状态。而:hover是通用的鼠标悬停伪类，对所有元素都生效，所以能正常起作用。

正确的解决方案 #

1. 确认选中行的标识类 #

打开浏览器开发者工具，选中已被选中的表格行，查看元素属性，会发现ngx-datatable会给.datatable-body-row元素添加active类（部分版本可能是is-selected类）。

2. 编写正确的CSS选择器 #

根据找到的类，使用对应的CSS代码：

/* 若选中行添加的是active类 */
.datatable-body-row.active .datatable-row-group {
  background-color: #22e26c !important;
}

/* 若选中行添加的是is-selected类 */
.datatable-body-row.is-selected .datatable-row-group {
  background-color: #22e26c !important;
}

3. 处理Angular样式作用域问题（若适用） #

如果是在Angular组件内编写样式，默认的视图封装机制会限制样式作用范围，导致无法穿透到ngx-datatable内部元素。此时可以：

• 将样式放到全局样式文件（如styles.css/styles.scss）中，无需额外处理；
• 或者使用::ng-deep穿透样式（注：::ng-deep已标记为deprecated，但目前仍可正常使用）：

::ng-deep .datatable-body-row.active .datatable-row-group {
  background-color: #22e26c !important;
}

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