Angular 15中CSS覆盖设置不生效问题求助

以下是几个常见的解决方向，按优先级尝试：

1. 修正MDC组件的CSS类名 #

Angular Material 15全面切换为基于MDC（Material Design Components）的组件架构，原有的组件类名已变更：

• 旧类名 .mat-table → 新类名 .mat-mdc-table
• 旧类名 .mat-row → 新类名 .mat-mdc-row

你需要将样式代码替换为：

.mat-mdc-table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}

2. 确保全局样式加载顺序正确 #

在angular.json的styles数组中，将你的全局样式文件（styles.css）放在Material主题样式之后，保证你的样式优先级更高：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

3. 处理组件视图封装限制 #

如果是在组件内的样式文件中修改样式，Angular默认的**视图封装（View Encapsulation）**会阻止样式渗透到Material组件内部，可通过两种方式解决：

方式一：使用::ng-deep穿透封装 #

在组件样式中添加::ng-deep前缀（当前仍广泛用于覆盖第三方组件样式）：

::ng-deep .mat-mdc-table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}

方式二：关闭组件视图封装 #

在组件的@Component元数据中设置encapsulation: ViewEncapsulation.None，让组件样式全局生效：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

4. 提升选择器特异性 #

如果上述方法仍不生效，打开浏览器开发者工具（F12）查看元素样式优先级，使用更具体的选择器覆盖默认样式：

body .mat-mdc-table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}

5. 验证样式是否被正确应用 #

通过浏览器开发者工具检查目标元素：

• 确认你的样式是否出现在Styles面板中
• 若样式被划掉，说明优先级低于Material默认样式，需提升特异性或调整加载顺序
• 若样式未出现，检查样式文件是否正确引入、类名是否拼写错误

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