更改旋转垫的颜色

Question

如何更改旋转垫的颜色 我试过了但是没用

HTML

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

Answer 1

color输入接受三个值：

• primary：您的应用的主面板
• warn：您应用的警告面板
• accent：您应用的重点调色板

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

Answer 2

此代码对我有用：

scss

redsocks

html

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

Answer 3

color属性仅接受值primary，accent和warning。这些颜色与项目中使用的“材料设计”主题相对应。

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

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

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

编辑

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