内部按钮中的微调器颜色不正确

Question

当我添加一个mat-spinner按钮

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

我无法将颜色与该按钮的文本颜色对齐。有什么方法可以给旋转器提供与文本相同的颜色吗？

Answer 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将不起作用

Answer 2

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

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

Answer 3

给出的答案表明，组件本身无法完成。给定答案的问题是，当您更改主题时，您还可以修复这些颜色。例如，如果禁用该按钮，则颜色应为灰色。

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

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

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