Angular Material mat-spinner 自定义颜色

Posted 2023-03-06

【中文标题】Angular Material mat-spinner 自定义颜色

【英文标题】：Angular Material mat-spinner custom color

【发布时间】：2018-07-24 22:59:06

【问题描述】：

有谁知道如何在 Angular Material 中更改 mat-spinner 颜色？ 覆盖css不起作用。我尝试在材质文件中更改颜色，但它们只能导入，我无法更改任何内容。 我希望它是我的自定义颜色，而不是来自 prebiult 主题的颜色。

【问题讨论】：

您好，您可以发布一个示例，说明您是如何尝试覆盖 CSS 的吗？

【参考方案1】：

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

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

【讨论】：

否则，如果您在某些内部组件中显示微调器，则可以使用此处提到的相同 CSS，通过前缀 ':host /deep/...'。像 ":host /deep/.mat-progress-spinner circle, .mat-spinner circle stroke: #3fb53f;

可以在生产中使用它吗？看起来有点hacky。

嗨，我们可以动态更新微调器颜色吗（例如：选择的颜色应该从选择器更新）？

【参考方案2】：

此答案适用于那些在 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;
    

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

【讨论】：

Funcionou pra mim!

今天救了我的命。

【参考方案3】：

轻松修复！

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

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

【讨论】：

对我来说，它在组件级别上也不起作用，但在 global.css 中可以正常工作。

尝试了其他所有方法。这是唯一对我有用的方法。将其添加到我的 styles.css（@import 主题之后）而不是组件 css。

这会让所有的纺纱机都变白，对吧？不会认为这是一个简单的解决方案。但是，您可以添加一个外部类，因此这只适用于具有该类的元素内的微调器。

【参考方案4】：

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

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

【讨论】：

谢谢！添加 :host ::ng-deep 使它对我有用。

【参考方案5】：

mat-spinner html 代码：

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

现在是 sass 代码：

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

【参考方案6】：

如果您不想弄乱全局 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>

【参考方案7】：

颜色是内置的。

主题 可以使用 color 属性更改进度微调器的颜色。默认情况下，进度微调器使用主题的原色。这可以更改为“强调”或“警告”。

https://material.angular.io/components/progress-spinner/overview

例子

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

【讨论】：

非常有限，如果你需要一件白色的怎么办？

问题实际上是如何设置 custom 颜色。

【参考方案8】：

我认为这里的关键是必须在 GLOBAL styles.css 文件中。如果放置在下面的解决方案确实有效（如果添加 ng add，则在将材料添加到项目时应该影响 CSS 文件：

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

当然，如果您想要风格鲜明的微调器，您也可以向组件添加类并指定不同的选择器。但是，这些类似乎必须在全局 CSS 文件中。

【参考方案9】：

游戏迟到了，但这在我今天的.scss 文件中运行良好...

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

【参考方案10】：

默认情况下，角度材质将为您的微调器提供默认的原色。 您可以使用托盘中可用的 3 种颜色，它们是主要的、强调的、警告的。 但是，如果您需要不同的颜色，请考虑以下任一选项。

简单的方法（不推荐） 您可以使用任何方法来强制覆盖其他答案中提到的 css。如果您不希望微调器在整个应用程序中具有相同的颜色，我建议您在微调器元素上方使用父类。

正确和推荐的方法是我们对材料使用自定义主题。如果您已经有自定义，则可以 喜欢创建一个名为

的自定义mixin

//这里 $primary-color 是你希望你的微调器的颜色 @mixin spinner-custom-theme($primary-color, $accent-color, $warn-color) $custom-spinner-theme-primary: mat-palette($primary-color); $custom-spinner-theme-accent: mat-palette($accent-color, A200, A100, A400); $custom-spinner-theme-warn: mat-palette($warn-color);

$custom-spinner-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include mat-progress-spinner-theme($custom-spinner-theme);

现在转到@include angular-material-theme($custom-theme); 的文件。 写着 和 @include 你的 mixin 就在 @include angular-material-theme($custom-theme);

要了解有关如何创建自定义主题的更多信息，您可以查看此博客here

【参考方案11】：

示例颜色、描边宽度、直径和标题

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

【参考方案12】：

In your css file mention like below:

::ng-deep.mat-progress-spinner circle,.mat-spinner circle stroke: #f2aa4cff !important;

这里，::ng-deep 将用于强制样式。

!important 这里所说的是“这很重要”，您忽略所有其他规则并应用此规则。

【讨论】：

在为已经有 11 个答案的问题添加答案时，重要的是要指出您的答案所针对的问题的新方面，因为否则有人可能会将您的答案误认为是重复的，甚至是重复的。如果您的更改很微妙，请复制。另外，通过解释它的工作原理和原因以及为什么它是您认为最适合的任何标准的最佳选择，您并不是在提倡您的答案。

【参考方案13】：

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

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

【讨论】：

是的。直到我在 @import 之后将它添加到 styles.css 中才得到修复。

【参考方案14】：

使用此代码

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

md-progress-circular path 
  stroke: purple;

【参考方案15】：

如果你们想自定义网页上的每个微调器。你可以这样做：

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

现在在 mat-spinner 上添加类：

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

在css文件中：

.custom-spinner-color 
  stroke: #234188;

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

【参考方案16】：

在您的 styles.css 文件中，添加...

::ng-deep .mat-progress-spinner circle, .mat-spinner circle 
    stroke: #2A79FF!important;

正如您可能已经猜到的那样，我刚刚对Nitin Wahale's 答案进行了简单的修改。我在他的答案前面加上了::ng-deep，这对我来说很有效，因为我遇到了同样的问题。

我希望这对某人有帮助

【讨论】：

::ng-deep 不推荐也不应该使用。它也可能对应用程序的其他组件和部分产生影响。