无法更改垫旋转器的颜色答案

【问题标题】：Cannot change mat-spinner's colour无法更改垫旋转器的颜色
【发布时间】：2019-03-22 22:36:55
【问题描述】：

我知道有人问过这个问题 (Change color of mat-spinner)，但我想知道是否有不使用已弃用的 ::ng-deep 的解决方案？

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

HTML

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

SCSS

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

提前致谢！

【问题讨论】：

【解决方案1】：

::ng-deep 没有被官方弃用，取决于浏览器是否支持它，angular.io、until then，意思是被浏览器正式弃用，it should be preferred over /deep/ 和 >>>以获得更广泛的兼容性。

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

如果您的偏好是避免 ::ng-deep，则需要将您对 mat-spinner 的修改应用到项目中的根 styles.css

在styles.css

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

添加类

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

堆栈闪电战

请注意：

根据下面的UmutEsen 评论，正确的解决方案是设置主题并利用mat-spinner 上的color 输入。

【讨论】：

虽然这是一种有效的快速解决方案，但也可以考虑实现自定义主题以覆盖 Material 主题 material.angular.io/guide/theming 的默认颜色
@UmutEsen 是正确的，正确的解决方案是设置一个主题并利用类上的color 输入。
感谢您的建议。我最终使用了 ::ng-deep 并且可以确认它有效。我的问题最终是在我的 scss 中不正确的嵌套。