Angular Material中CSS变量为何覆盖inline及ID级!important样式？

为什么CSS变量能覆盖带!important的内联/ID样式？ #

核心原因分为两种场景：

1. Shadow DOM 样式隔离（最可能的触发场景） #

Angular Material基于MDC重构的组件（如列表组件）默认启用ViewEncapsulation.ShadowDom，组件内部的DOM节点（比如.mdc-list-item__primary-text）会被包裹在Shadow Root中。这种隔离机制会直接阻止外部样式（包括你写的内联样式、全局ID选择器）穿透到组件内部——哪怕这些样式带!important，也无法作用到Shadow DOM内的元素上。

你看到的“变量覆盖”实际上是外部样式根本没生效，而组件内部的.mdc-list-item__primary-text样式通过引用Angular Material主题的CSS变量，正常作用到了目标元素上。

2. CSS变量的优先级与穿透特性 #

• 跨边界传递：CSS变量是少数能跨Shadow DOM边界传递的样式机制，Angular Material的主题变量通常定义在全局:root或组件宿主元素上，能被Shadow DOM内部的样式直接读取。
• 变量自身的!important：如果主题变量是用!important定义的（比如:root { --mdc-list-item-primary-text-font-weight: 400 !important; }），它会强制覆盖任何局部定义的同名变量，最终通过var()赋值给font-weight时，自然会覆盖其他固定值样式。

即使组件用的是默认的Emulated封装，CSS变量也能穿透Angular的属性选择器封装，直接作用到组件内部元素；而常规的ID/内联样式如果是在组件本地样式中，会被加上[_ngcontent-xxx]属性选择器，全局的.mdc-list-item__primary-text样式结合变量使用时，也可能因为变量的全局生效性，看起来“覆盖”了本地的!important样式。

如何可靠覆盖这类样式？ #

根据组件的封装模式，可选择以下方案：

方案1：针对Shadow DOM封装的组件 #

要修改Shadow DOM内部的样式，需使用穿透机制：

• 使用::ng-deep（配合:host限定作用域，避免影响全局）：

  :host ::ng-deep .mdc-list-item__primary-text {
    font-weight: 700 !important;
  }
  

• 使用Shadow Parts（若组件支持）：
  查看Angular Material组件文档，若列表项的primary-text暴露了part属性，可直接通过:part()选择器修改：

  :host ::ng-deep .mdc-list-item :part(primary-text) {
    font-weight: 700;
  }
  

方案2：覆盖主题变量（推荐） #

符合Angular Material的主题设计逻辑，不会破坏组件样式结构：

• 全局覆盖：在styles.scss中重新定义主题变量：

  :root {
    --mdc-list-item-primary-text-font-weight: 700 !important;
  }
  

• 局部覆盖：在组件样式文件中针对宿主元素定义变量：

  :host {
    --mdc-list-item-primary-text-font-weight: 700;
  }
  

方案3：强制覆盖属性（针对Emulated封装） #

如果组件用的是Emulated封装，可使用更高特异性的选择器加!important强制覆盖：

:host #my-list-item.mdc-list-item__primary-text {
  font-weight: 700 !important;
}

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