更改垫旋转器的颜色答案

【问题标题】：Change color of mat-spinner更改垫旋转器的颜色
【发布时间】：2019-03-13 01:00:50
【问题描述】：

如何改变 mat-spinner 的颜色我试过了，但没有用

HTML

<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>

【问题讨论】：

【解决方案1】：

color 输入接受三个值：

要使用十六进制代码，您只能使用 CSS。我建议您使用 Chrome DevTools 查看要定位的 CSS 类。请注意，您也应该使用!important 选择器。

【讨论】：

在 DevTools 我有这行代码 .mat-progress-spinner circle, .mat-spinner circle { stroke: #673ab7; } 。我在我的 css 文件中尝试了这段代码，但没有改变颜色： .mat-progress-spinner circle, .mat-spinner circle { stroke: #FFFFFF !important; }

【解决方案2】：

color 属性只接受值primary、accent 和warning。这些颜色与您项目中使用的 Material Design 主题相对应。

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

如果您想用自定义颜色覆盖它，请添加以下 css：

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: /* color */
}

编辑

将样式放在全局样式表中，视图封装会阻止样式在放置在组件样式表中时起作用。

【讨论】：

【解决方案3】：

这段代码对我有用：

scss

.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}

html

<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>

【讨论】：