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

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 来解决这个问题。

给微调器一个 class:

  <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
  }

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

Answer 2

Angular 有针对 css 的深层协议。在您的 css 文件中只需添加

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

Answer 3

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

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

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

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

spinner inside button has incorrect color