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

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

通过这种方式，笔触颜色来自父级，即按钮，并且与当前主题对齐：）

DEMO

Improved demo