无法更改垫子旋转器的颜色

Question

我知道有人问过这个问题（更改 mat-spinner 的颜色），但我想知道是否有解决方案不使用已弃用的 ::ng-deep？

另外，我还尝试了链接中建议的方法，但不起作用：

超文本标记语言

<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>

社会保障体系

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

提前致谢！

Answer 1

::ng-deep 并未被正式弃用，并且取决于浏览器删除对它的支持，per angular.io, , 意思是为了更广泛的兼容性而until then被浏览器正式弃用。it should be preferred/deep/>>>

因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在那之前，应该首选 ::ng-deep，以获得与工具更广泛的兼容性。

如果您希望避免 ::ng-deep，您将需要将对的修改应用到项目的mat-spinner根目录styles.css

在styles.css

.orange-spinner circle{
  stroke:orange !important;
}

添加班级

<mat-spinner class="orange-spinner"></mat-spinner>

斯塔克闪电战

请注意：

根据UmutEsen下面的评论，正确的解决方案是设置一个主题并color利用mat-spinner.

虽然这是一种有效的快速解决方案，但人们也可以考虑实现自定义主题来覆盖 Material 主题的默认颜色 https://material.angular.io/guide/theming (2认同)