如何修改mat-spinner组件中未填充圆环的颜色？

要修改mat-progress-spinner未填充部分的颜色，你需要区分组件内部的两个circle元素：一个是进度环（已填充的部分），另一个是背景环（未填充的部分）。默认情况下，背景环有独立的样式类，你需要针对它单独设置样式。

解决方案 #

方法1：使用组件内置类（全局样式或穿透样式） #

如果你的样式写在全局样式文件（如styles.scss）中，直接添加以下代码：

/* 设置未填充的背景环颜色 */
.mat-progress-spinner .mat-progress-spinner-background-circle {
  stroke: #6aa1fe; /* 你的浅蓝色 */
  opacity: 1; /* 覆盖默认的半透明效果，确保颜色正常显示 */
}

/* 可选：自定义已填充进度环的颜色（如果需要偏离主题色） */
.mat-progress-spinner .mat-progress-spinner-circle {
  stroke: #你的进度环颜色;
}

如果样式写在组件的局部样式文件中（如xxx.component.scss），由于Angular的样式隔离机制，需要使用::ng-deep穿透：

::ng-deep .mat-progress-spinner .mat-progress-spinner-background-circle {
  stroke: #6aa1fe;
  opacity: 1;
}

方法2：通过SVG元素属性区分（备用） #

如果内置类不好用，也可以通过SVG元素的属性直接选择背景环（背景环通常没有stroke-dasharray的动态设置）：

.mat-progress-spinner circle:not([stroke-dasharray]) {
  stroke: #6aa1fe;
  opacity: 1;
}

为什么原代码无效？ #

你之前的CSS选择器.mat-progress-spinner circle选中了所有circle元素，但背景环默认带有.mat-progress-spinner-background-circle类，其样式优先级高于通用的circle选择器，且默认设置了较低的opacity（通常为0.2），导致你的颜色设置无法正常显示。

内容的提问来源于stack exchange，提问作者Chaim Zushe Wilmowsky