Angular Material进度Spinner自定义主题不生效问题咨询

我正尝试为Angular Material的进度Spinner定义自定义主题，按照官方文档编写了如下代码：

.my-custom-theme {
  $primary: mat.define-palette(mat.$red-palette);
  $theme: mat.define-light-theme($primary, $primary, $primary);
  
  @include mat.core-theme($theme);
  @include mat.all-component-colors($theme);
  @include mat.all-component-themes($theme);
  @include mat.all-component-typographies($theme)
}

<div class="my-custom-theme">
  <mat-spinner></mat-spinner>
  <button mat-flat-button>Test</button> <!-- 这个按钮能正确应用自定义主题颜色 -->
</div>

将组件置于自定义主题类的容器中后，按钮可正确应用该自定义主题，但进度Spinner仍使用项目默认主题，请问我遗漏了什么配置？

核心原因 #

Angular Material的mat-spinner默认使用accent（强调色），而mat-flat-button默认使用primary（主色）。你虽然把主题的primary、accent、warn都设为同一个调色板，但代码中重复调用了多个主题混合宏，导致样式优先级冲突，容器级主题的accent样式没能覆盖全局默认主题。

另外，你调用的多个混合宏存在冗余：mat.all-component-themes已经包含了mat.core-theme、mat.all-component-colors、mat.all-component-typographies的所有功能，重复调用反而会干扰样式优先级。

修复步骤 #

1. 简化主题代码 #

只保留必要的混合宏调用，避免冗余：

.my-custom-theme {
  $primary: mat.define-palette(mat.$red-palette);
  // 明确指定accent（Spinner默认用这个），如果需要Spinner和按钮同色，就和primary保持一致
  $accent: mat.define-palette(mat.$red-palette);
  $warn: mat.define-palette(mat.$red-palette);
  $theme: mat.define-light-theme($primary, $accent, $warn);
  
  // 仅保留这一个混合宏即可
  @include mat.all-component-themes($theme);
}

2. 强制覆盖Spinner样式（可选，若上述方法无效） #

如果全局默认主题的优先级仍然更高，可以在容器主题中显式指定Spinner的颜色变量：

.my-custom-theme {
  $primary: mat.define-palette(mat.$red-palette);
  $accent: mat.define-palette(mat.$red-palette);
  $theme: mat.define-light-theme($primary, $accent, $accent);
  
  @include mat.all-component-themes($theme);

  // 直接覆盖Spinner的CSS变量
  mat-spinner {
    --mdc-circular-progress-active-indicator-color: mat.get-color-from-palette($primary, 500);
  }
}

3. 模板中显式指定颜色（快速生效方案） #

也可以直接在模板里给mat-spinner指定颜色属性，强制使用主题的primary色：

<div class="my-custom-theme">
  <mat-spinner color="primary"></mat-spinner>
  <button mat-flat-button>Test</button>
</div>

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