Angular + mat-table 交替行颜色场景下选中行高亮样式覆盖问题

问题根源 #

1. 样式作用元素不匹配：交替行背景样式是作用在子元素.mat-cell上的，而highlight类是添加在父级.mat-row节点上，子元素的背景色默认会覆盖父元素的背景，因此父元素的高亮色会被子元素的交替色遮挡。
2. 选择器权重不足：原有交替行选择器.mat-row:nth-child(odd) .mat-cell的权重远高于单类选择器.highlight，就算加了!important也因为作用元素不同无法生效。

解决方案 #

方案1：调整高亮样式的作用元素和权重（最推荐，兼容性最好） #

直接将高亮样式作用到.mat-cell节点，同时匹配原有选择器的权重即可，代码如下：

.mat-row.highlight .mat-cell {
  background-color: #00a775 !important;
}

该选择器权重与原有交替行选择器一致，且加载顺序靠后，可完全覆盖原有交替色规则，奇偶行都能正常显示高亮效果。

方案2：选中时清空对应行的交替色（无需给高亮加!important） #

可以用CSS的:has伪类匹配到被选中的奇数行，主动清空其.mat-cell的默认背景色：

/* 匹配加了highlight类的奇数行，清空默认交替色 */
.mat-row:nth-child(odd):has(.highlight) .mat-cell {
  background-color: unset;
}
/* 正常编写高亮样式即可 */
.highlight {
  background-color: #00a775;
}

注意:has伪类在低版本浏览器（如IE、旧版Safari）不支持，需要兼容老版本浏览器时不推荐使用该方案。

方案3：通过TS动态操作样式规则（不推荐） #

如果确实需要在TS中禁用原有交替行规则，可以手动遍历样式表找到对应的.mat-row:nth-child(odd) .mat-cell规则并禁用，但该方法会影响全局所有mat-table的样式，维护成本极高，不建议使用。

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