Angular material 更改垫纺纱机的颜色

如何更改垫纺纱机的颜色 我试过了，但没用

Html

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

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

---

颜色输入接受三个值：

• primary

  ：应用程序的主要调色板

• 警告

  ：应用程序的警告调色板

• 重音

  ：应用程序的重音调色板

---

要使用十六进制代码，只能使用CSS。我建议您使用chromedevtools来查看要针对哪些CSS类。请注意，您应该使用

！重要信息

选择器。

颜色属性仅接受值

主

、

重音

和

警告

。这些颜色与项目中使用的材质设计主题相对应

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

编辑

---

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

此代码适用于我：

scss

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

html

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

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

DevTools中的可能重复代码我有这行代码。mat progress spinner circle，.mat spinner circle{stroke:#673ab7；}。我在css文件中尝试了此代码，但没有更改颜色：.mat progress spinner circle、.mat spinner circle{stroke:#ffffffff！important；}将其放置在全局样式、样式表中，即

样式。（s）css

。视图封装有时会弄乱材质样式。这对我来说很有用。mat spinner color:：ng deep circle{stroke:#FFFFFF！重要；}是的，我想这是通过视图封装实现的。@OmarAMEZOUG你是说我的代码不起作用吗？因为我测试了它。我尝试了你的代码，但对我来说不起作用，可能是因为我没有把你的代码放在全局css文件中，但在我的情况下，我需要把代码放在我的组件css文件中。正如这里所讨论的，深度是不推荐的。我建议不要这样做。