Angular Material为何强制覆盖我的SCSS样式？

你遇到的是CSS特异性优先级问题，Angular Material的内置样式选择器权重通常高于单独定义的.alert-danger类，导致自定义样式被覆盖。不用!important也能解决，推荐以下几种方案：

1. 提高自定义选择器的特异性 #

通过结合Angular Material的元素类编写更具体的选择器，让你的样式权重超过Material的内置样式。

针对mat-table的行，把自定义类和mat-row类组合：

.mat-row.alert-danger {
  background-color: #F8D7DAFF;
}

.mat-row.alert-info {
  background-color: #D1ECF1FF;
}

这种组合选择器的权重是两个类选择器相加，比Material单独的.mat-row选择器权重更高，自然会覆盖原有样式。

2. 调整样式文件加载顺序 #

确保你的自定义样式文件在Angular Material的样式之后加载。在angular.json的styles数组中，把全局样式文件放在@angular/material主题样式之后：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css", // 自定义全局样式放在Material样式后面
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

相同权重的选择器，后加载的样式会覆盖先加载的。

3. 组件内样式穿透（针对组件内定义的样式） #

如果样式写在组件的.component.css文件中，Angular默认的样式封装会隔离组件样式，可能无法作用到Material组件上。可以用:host ::ng-deep穿透封装（注意这是逐步淘汰的特性，仅推荐在组件内临时使用）：

:host ::ng-deep .mat-row.alert-danger {
  background-color: #F8D7DAFF;
}

更推荐将通用样式放在全局样式文件中，避免依赖::ng-deep。

4. 自定义Angular Material主题（可选） #

如果行样式属于主题统一调整的部分，可以通过定制Material主题定义全局状态样式。但这种方式更适合批量主题修改，对于动态根据行数据变化的样式，前面的选择器方案更直接。

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