Невозможно изменить цвет циновки

Question

Я знаю, что этот вопрос был задан ( Изменить цвет мата-прядильщика ), но мне было интересно, было ли решение не использовать устаревший :: ng-deep?

Кроме того, я также попробовал метод, предложенный в ссылке, но он не работает:

HTML

<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>

SCSS

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

Заранее спасибо!

Answer 1

:: ng-deep официально не рекомендуется и зависит от браузеров, удаляющих его поддержку, для angular.io, until then, что означает, что браузеры официально устарели, it should be preferred более /deep/ и >>>для более широкой совместимости.

В связи с этим мы планируем отказаться от поддержки в Angular (для всех 3 из / deep /, >>> и :: ng-deep).До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

---

Если вы предпочитаете избегать :: ng-deepвам нужно будет применить ваши модификации для mat-spinner к корню styles.css в вашем проекте

в styles.css

.orange-spinner circle{
  stroke:orange !important;
}

добавить класс

<mat-spinner class="orange-spinner"></mat-spinner>

Stackblitz

https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css

---

Обратите внимание:

За UmutEsen комментарий ниже, правильныйРешение заключается в настройке темы и использовании ввода color на mat-spinner.

https://material.angular.io/guide/theming