Angular中Mat-Spinner已写入标记但无样式/不可见问题排查

你的mat-spinner组件无样式或不可见，核心问题出在主题样式未正确应用到进度 spinner 组件，具体有两个关键点：

1. 未为进度 spinner 加载主题混合器 #

你在styles.scss中仅为按钮组件加载了主题（mat.button-theme），但没有为mat-spinner对应的progress-spinner组件加载主题样式，导致组件缺少必要的颜色、尺寸等样式定义。

2. 自定义主题类未全局应用 #

你定义的.custom-theme类如果没有添加到应用的根元素上，整个主题样式都不会生效。

修复步骤： #

步骤1：更新styles.scss，为所有组件加载主题（或单独为 spinner 加载）

如果你想一次性为所有 Angular Material 组件应用主题，推荐使用mat.all-component-themes混合器，替代单独的mat.button-theme：

@use "@angular/material" as mat;

$custom-primary: mat.define-palette(mat.$green-palette, 800, 900, 500);
$custom-accent: mat.define-palette(mat.$brown-palette, A200, A100, A400);

$custom-theme: mat.define-dark-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
    ),
  )
);

.custom-theme {
  // 替换原来的button-theme，为所有Material组件应用主题
  @include mat.all-component-themes($custom-theme);
}

如果只想单独为 spinner 加载主题，保留按钮的同时添加：

.custom-theme {
  @include mat.button-theme($custom-theme);
  @include mat.progress-spinner-theme($custom-theme); // 新增这一行
}

步骤2：将自定义主题类添加到应用根元素

打开app.component.html，确保根容器（通常是最外层的div或app-root标签）添加了.custom-theme类：

<div class="custom-theme">
  <!-- 你的应用所有内容 -->
  <mat-spinner color="primary" value="100"></mat-spinner>
</div>

额外检查：

• 确认MatProgressSpinnerModule已正确导入到app.module.ts（你已经做到了，这部分没问题）
• 如果value="100"时 spinner 看起来是静态的，可以尝试调整mode属性为indeterminate（无限循环），更直观看到动画效果：

<mat-spinner color="primary" mode="indeterminate"></mat-spinner>

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