Angular Material mat-spinner自定义颜色

Question

有谁知道如何更改Angular材料中的mat-spinner颜色？重写css不起作用.我尝试更改材料文件中的颜色,但它们只能导入,我无法更改任何内容.我希望它是我的自定义颜色,而不是prebiult主题的颜色.

Answer 1

将此代码用于**<mat-spinner>**将此代码添加到.css文件中

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

Answer 2

如果您不想搞乱全局 CSS，并且需要一种方法将微调器在应用程序的不同区域设置为不同的颜色，我强烈建议为其创建一个指令。

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{

  @Input() color: string;

  constructor(
    private elem: ElementRef
  ){}

  ngAfterViewInit(){
    if(!!this.color){
      const element = this.elem.nativeElement;
      const circle = element.querySelector("circle");
      circle.style.stroke = this.color;
    }
  }

}

那么旋转器应该像这样工作：

<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>

Answer 3

轻松修复！

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

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

Answer 4

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

• 在您的html文件中：

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

• 在您的css / scss文件中：

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

注意，.uploader-statuscss类封装了组件。您可以只使用::ng-deep而不使用类，但是您对垫旋转器所做的任何更改都将出现在应用程序的其他区域。检查此以了解更多信息。

Answer 5

添加到您的 .css/.scss 组件文件样式（它将在本地工作 - 仅在组件中）

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

Answer 6

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

这对我使用 Angular 15 有用。

Answer 7

mat-spinner html 代码：

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

现在 sass 代码：

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

Answer 8

最好通过定制主题来实现这一点。

https://material.angular.io/guide/theming