вертушка внутри кнопки имеет неправильный цвет

Question

Когда я добавляю mat-spinner к кнопке

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

Я не могу выровнять цвет с цветом текста этой кнопки.Можно ли как-нибудь придать блесне тот же цвет, что и текст?

Answer 1

Angular имеет глубокий протокол для css.В вашем файле CSS просто добавьте

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

Answer 2

Полученные ответы показывают, что это невозможно сделать с помощью самих компонентов.Проблема с данными ответами состоит в том, что когда вы меняете тему, вы также должны исправить эти цвета.Например, если кнопка отключена, цвет должен быть серым.

Чтобы иметь правильный цвет, я создал следующий глобальный CSS

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

Таким образом, цвет обводкипроисходит от родителя, который является кнопкой и совпадает с текущей темой:)

DEMO

Улучшенная демонстрация

Answer 3

Поскольку компоненты 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
  }

Определение CSS в стилях ваших компонентов не будет работать, если вы не измените ViewEncapsulation