按钮内的微调器颜色不正确答案

【问题标题】：spinner inside button has incorrect color按钮内的微调器颜色不正确
【发布时间】：2019-02-27 22:28:56
【问题描述】：

当我将mat-spinner 添加到按钮时

<button mat-raised-button color="accent">
    <mat-spinner color="primary">
    </mat-spinner> Accent
</button>

我无法将颜色与该按钮的文本颜色对齐。有什么办法可以让微调器与文本颜色相同？

【问题讨论】：

【解决方案1】：

由于 Angular Material 组件仅允许 primary、accent 或 warn，因此您需要使用 CSS 来解决这个问题。

给微调器一个类：

  <mat-spinner class="my-spinner">
  </mat-spinner> Accent

在你的全局 css 中：

  .my-spinner.mat-spinner circle {
    stroke: rgba(0, 0, 0, 0.87); // change to the color you want
  }

除非您更改 ViewEncapsulation，否则在组件样式中定义 css 将不起作用

【讨论】：

【解决方案2】：

Angular 有一个深度的 CSS 协议。在你的css文件中添加

/deep/ mat-spinner circle {
  stroke: white
}

【讨论】：

【解决方案3】：

给出的答案表明它不能用组件本身来完成。给定答案的问题在于，当您更改主题时，您还需要修复这些颜色。例如，如果按钮被禁用，颜色应该是灰色的。

为了使微调器具有正确的颜色，我创建了以下全局 css

.spinner-button {
    circle {
        stroke: currentColor; 
    }
}

这样，笔触颜色来自父级，即按钮并与当前主题对齐:)

【讨论】：