更改垫子旋转器的颜色

Question

如何改变垫子旋转器的颜色 我试过了，但没用

HTML

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

Answer 1

这段代码对我有用：

scss

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

html

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

Answer 2

颜色属性仅接受值

primary

、

accent

和

warning

。这些颜色与您的项目中使用的 Material Design 主题相对应。

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

如果您想使用自定义颜色覆盖它，请在全局样式表中添加以下CSS：

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

注意

视图封装会阻止样式在放置在组件样式表中时发挥作用。

Answer 3

color

输入接受三个值：

• primary

  ：应用程序的主要调色板

• warn

  ：应用程序的警告调色板

• accent

  ：应用程序的口音调色板

要使用十六进制代码，只能使用CSS。我建议您使用 Chrome DevTools 来查看要定位的 CSS 类。请注意，您还应该使用

!important

选择器。

Answer 4

对我有用的唯一方法：

scss

.mat-mdc-progress-spinner{
  --mdc-circular-progress-active-indicator-color: black;
}

无需更改 html 文件中的任何内容。