Angular Material mat-spinner自定义颜色

Question

有人知道如何在Angular Material中更改垫旋转器的颜色吗？覆盖CSS无效。我尝试更改材质文件中的颜色，但只能将其导入，而不能在那里进行任何更改。我希望它是我的自定义颜色，而不是前主题的颜色。

Answer 1

将此代码用于** **将此代码添加到您的。css文件中

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}

Answer 2

mat-spinner html代码：

<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>

现在是sass代码：

.mat-spinner {
    ::ng-deep circle {
        stroke: #33dd82;
    }
}

Answer 3

[如果您想自定义网页上的每个微调框。您可以这样操作：

svg .mat-progress-spinner circle, .mat-spinner circle {
  stroke: inherit;
}

现在在mat-spinner上添加类：

<mat-spinner class="custom-spinner-color"></mat-spinner>

并且在css文件中：

.withdraw-deposit-modal-spinner{
  stroke: #234188;
}

这就是我想要实现的目标。我想，如果您寻找这个问题，可能会想要同样的内容。

Answer 4

此答案将对那些正在Angular 4/6/7中寻求灵活解决方案的人有用。如果您不想在组件级别更改垫旋转器的颜色，则需要使用::ng-deep选择器。知道这一点，解决方案就很容易。

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }

注意，.uploader-status css类封装了该组件。您可以只使用::ng-deep而不使用类，但是您对垫旋转器所做的任何更改都将出现在应用程序的其他区域。 Check this to learn more。

Answer 5

轻松修复！

在styles.css中而不是component.css文件中添加自定义CSS规则

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}

Answer 6

内置颜色。

主题可以使用color属性更改进度条的颜色。默认情况下，进度条使用主题的原色。可以将其更改为“重音”或“警告”。

示例

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

Answer 7

向您的.css / .scss组件文件样式添加（它将在本地运行-仅在组件中）

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}

Answer 8

晚于游戏，但今天在我的.scss文件中效果很好...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}

Answer 9

最好通过执行自定义主题来实现。

Answer 10

使用此代码

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}

Answer 11

样本颜色，笔触宽度，直径和标题

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>