logo标签列表

Angular Material mat-spinner 自定义颜色

cssangularangular-materialspinner
62

有人知道如何在Angular Material中更改mat-spinner的颜色吗？ 覆盖CSS无效。我尝试在Material文件中更改颜色，但它们只能被导入，我不能在那里做任何改变。 我想要的是自定义颜色，而不是来自预构建主题的颜色。

你好，你能否发一个例子展示你尝试重写 CSS 的方法？ - F.Almeida
25个回答
57

在您的.css文件中添加以下代码，用于 < mat-spinner >

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
4
否则，如果您在某个内部组件中显示旋转器，则可以通过在前缀中添加“：host /deep/...”来使用此处提到的相同CSS。例如：“：host /deep/.mat-progress-spinner circle，.mat-spinner circle { stroke:＃3fb53f; }”。 - akgupta
这个在生产环境中使用没问题吗？看起来有点不正规。 - vighnesh153
你好，我们能否动态更新下拉框的颜色（例如：从选择器中选择的颜色应该被更新）？ - Nanda Kishore Allu
43

对于那些在寻求 Angular 4 / 6 / 7 中灵活解决方案的人来说，本答案将起作用。如果您想在组件级别上更改 mat-spinner 的颜色，您需要使用 ::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;
    }

Notice that the .uploader-status css class encapsulates the component. You could just use ::ng-deep without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.

1
对我有效！ - user2421145
1
今天救了我的命。 - Stefan Falk
18

简单解决方案！

将自定义的CSS规则放在styles.css文件中，而不是component.css文件中。

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}
2
对我来说，在组件级别上它也不起作用，但在global.css中可以正常工作。 - Recek
尝试了其他所有方法，只有这个方法对我有效。将其添加到我的styles.css中（在@import主题之后），而不是组件css中。 - DaveC426913
这会使所有的旋转器都变成白色，对吧？不认为这是一个简单的修复。但你可以添加一个外部类，这样只有在具有该类的元素内部的旋转器才适用。 - Jeppe
15
如果您不想改动全局 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>
1
干净，不使用ng-deep，不同部分的应用程序采用多种颜色。完美。 - pleutre
14

在您的.css/.scss组件文件样式中添加（它将仅在组件本身中起作用）

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}
1
谢谢！加上:host ::ng-deep让它对我起作用了。 - user5826312
你是从哪里了解到 :host ::ng-deep 的？ - Antony Gibbs
10

mat-spinner html代码:

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

现在是sass代码:

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

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

这对我在使用 Angular 15 时有效。

提供清晰简洁的概述，说明代码的作用和相关性。这可以帮助其他用户理解代码的目的和上下文，以及它如何适应整体解决方案。 - DSDmark
4
4
极为有限，如果你需要一个白色的单品怎么办？ - lostintranslation
3
问题的字面意思是如何设置一个“自定义”颜色。 - Jeppe
4

我认为关键在于必须放在全局 styles.css 文件中。如果使用 ng add 添加到项目中时，应该将下面的解决方案放在受到影响的 CSS 文件中：

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

当然，您也可以向组件添加类并指定不同的选择器以获得独特的样式旋转器。但是，似乎这些类必须在全局CSS文件中。
3

虽然有点晚了，但今天我在我的.scss文件中使用这个方法效果很好...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接