Angular 16升级后mat-table隔行变色与hover背景色失效求助

问题分析 #

Angular 13升级到16后，Material组件的样式体系有多处更新（比如CSS变量普及、样式权重调整），导致旧的自定义行样式要么被内置主题样式覆盖，要么因视图封装规则无法穿透到组件内部。

解决方案 #

方案1：全局样式增强权重（推荐）

在style.scss中添加更精准的选择器，确保样式优先级高于内置样式：

/* 隔行变色 */
.mat-table .mat-row:nth-child(odd) {
  background-color: #FFFFFF !important;
}

.mat-table .mat-row:nth-child(even) {
  background-color: #F8F8F8 !important;
}

/* 行hover效果 */
.mat-table .mat-row:hover {
  background-color: #87CEEB !important;
}

方案2：组件内关闭视图封装

如果不想污染全局样式，可在目标组件中关闭视图封装，让组件内的样式穿透到Material组件：

1. 修改组件类：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-table-component',
  templateUrl: './your-table-component.html',
  styleUrls: ['./your-table-component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourTableComponent { }

2. 在组件样式文件中保留原样式即可：

.mat-row:nth-child(odd) {
  background-color: #FFFFFF;
}

.mat-row:nth-child(even) {
  background-color: #F8F8F8;
}

.mat-row:hover {
  background-color: #87CEEB;
}

方案3：使用CSS变量（适配新版本Material）

Angular 15+的Mat-Table行样式支持通过CSS变量控制，可直接覆盖内置变量：

.mat-row:nth-child(odd) {
  --mat-row-background-color: #FFFFFF;
}

.mat-row:nth-child(even) {
  --mat-row-background-color: #F8F8F8;
}

.mat-row:hover {
  --mat-row-hover-background-color: #87CEEB;
}

排查技巧 #

1. 打开浏览器开发者工具，选中mat-row元素，查看Styles面板：
   • 检查自定义样式是否被标记为划掉（说明被更高权重样式覆盖）
   • 确认mat-row类名是否正确，是否有新增的父类前缀
2. 逐步增加选择器权重（比如添加组件选择器前缀：app-your-table .mat-row），直到样式生效

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