Angular Material：未包裹MDC类时主题覆盖不生效，此预期是否有误？

我尝试使用Angular Material主题系统自定义Material Chips，原本预期以下写法生效：

@include mat.chips-theme(...);
@include mat.chips-overrides(...);

但实际并未达到预期效果。后来发现必须通过指定MDC类才能让覆盖样式生效：

@include mat.chips-theme(...);

mat-chip-grid .mat-mdc-chip.mat-mdc-standard-chip {
  @include mat.chips-overrides(...);
}

我原本认为无需包裹*-mdc-*类即可使用覆盖样式，这一预期是否存在问题？似乎mat.chips-theme()设置的样式优先级高于通用覆盖样式。

问题原因 #

Angular Material 19.x版本基于MDC（Material Design Components）完成重构后，组件样式的优先级逻辑发生了明确变化：

• mat.chips-theme()生成的样式会直接绑定到mat-mdc-chip这类MDC相关的具体类选择器上，优先级天然更高
• 直接单独调用mat.chips-overrides()时，生成的样式选择器不够具体，优先级低于主题内置的默认样式，因此被覆盖而无法生效

可行的解决方案 #

你当前采用的通过*-mdc-*类提升选择器特异性的方法是正确的，除此之外还有两种可选方案：

1. 主题定义阶段集成自定义配置：不在主题外单独调用chips-overrides，而是直接在定义主题时传入自定义配置，示例如下：

$custom-chips-config: mat.define-chips-config(
  $color: (
    primary: ...,
    secondary: ...
  ),
  $typography: ...,
  $density: ...
);

@include mat.chips-theme($custom-chips-config);

2. 使用!important强制覆盖：在chips-overrides的属性值后添加!important，但这种方式会破坏样式优先级的自然逻辑，增加后续样式维护的复杂度，不推荐常规使用。

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