Изменить цвет мата-прядильщика

Question

Как изменить цвет мата, я попробовал это, но не работает

HTML

<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>

Answer 1

Свойство color принимает только значения primary, accent и warning.Это цвета, которые соответствуют теме Material Design, используемой в вашем проекте.

<mat-spinner color="primary"></mat-spinner>

Если вы хотите переопределить это с помощью пользовательского цвета, добавьте следующий css:

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: /* color */
}

EDIT

Поместите стили в глобальную таблицу стилей, инкапсуляция вида препятствует работе стилей при помещении в таблицу стилей компонента.

Answer 2

Этот код работал для меня:

scss

.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}

html

<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>

Answer 3

Вход color принимает три значения:

• primary: основная палитра вашего приложения
• warn: палитра предупреждений вашего приложения
• accent: палитра акцентов вашего приложения

Чтобы использовать шестнадцатеричные коды, вы можете сделать это только с помощью CSS.Я предлагаю вам использовать Chrome DevTools, чтобы увидеть, какие классы CSS нужно настроить.Обратите внимание, что вы также должны использовать селектор !important.