Angular 15中Material Design表格样式失效，咨询版本变更原因

1. 组件样式隔离机制强化 #

Angular默认的ViewEncapsulation.Emulated会给组件内的CSS加上专属属性选择器（比如[_ngcontent-xxx]），而Angular Material的表格元素（mat-cell、mat-row）属于独立的Material组件，不在当前组件的封装作用域内。

• Angular 8时期，::ng-deep限制少，能轻松穿透隔离覆盖Material样式；但从Angular 12开始，::ng-deep被标记为废弃，且Material组件的样式隔离更严格，普通组件内的类选择器根本碰不到Material组件的DOM元素，旧样式自然失效。

2. Material组件样式优先级与体系升级 #

从Angular 8到15，Material完成了样式体系的全面迭代：

• CSS变量全面替代硬编码样式：Material从v11开始大量用CSS变量定义主题和组件样式（比如--mdc-table-row-background-color），旧代码里直接写tr.mat-row { background: #79a1d8; }会被内置的CSS变量覆盖，因为变量优先级高于普通类样式。
• 内置选择器更具体：Material组件的内置样式改用更精准的选择器（比如mat-row.mat-row），或者通过内联样式、:host伪类提升优先级，用户写的普通类选择器优先级不够，哪怕加!important都可能被压下去。

3. Material Table的DOM结构与类名调整 #

版本迭代中，Material Table的DOM结构和类名细节有变动：

• 部分元素的类名从.mat-cell、.mat-row调整为和MDC（Material Design Components）对齐的类名（比如.mdc-data-table__cell），旧代码里的选择器匹配不上新类名，样式当然不生效。
• 表格布局结构优化，比如行元素的包裹层级变了，旧样式的选择器找不到目标元素。

实用修复方案 #

• 把表格样式写在全局样式文件（比如styles.css）里，绕开组件封装的限制；
• 用Material提供的主题变量或自定义CSS变量覆盖样式，示例：

  mat-table {
    --mdc-table-row-background-color: #79a1d8;
    --mdc-data-table-cell-outline-width: 2px;
    --mdc-data-table-cell-outline-color: #ffa600;
  }
  

• 若必须用组件内样式，可临时结合:host ::ng-deep穿透隔离（虽标记废弃但仍可使用）：

  :host ::ng-deep tr.mat-row {
    background: #79a1d8;
  }
  :host ::ng-deep td.mat-cell {
    padding: 16px 0;
    border-top: 2px solid #ffa600;
    border-bottom: 2px solid #ffa600;
  }
  

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