it-swarm.com.ru

Angular Материал мат-прядильщика нестандартного цвета

Кто-нибудь знает, как я могу изменить цвет циновки в Angular материале? Переопределение CSS не работает. Я попытался изменить цвет в файлах материалов, но их можно только импортировать, я ничего не могу изменить там. Я хочу, чтобы это был мой собственный цвет, а не цвет из prebiult-тем.

8
mavrise

Используйте этот код для ** <mat-spinner> ** добавьте этот код в ваш .css файл

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
14
Nitin Wahale

Легко исправить!

Добавить пользовательские правила CSS внутри styles.css вместо файла component.css

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}
3
Debojyoti

Цвет встроен. 

Тематика Цвет счетчика прогресса можно изменить с помощью свойства color. По умолчанию счетчики прогресса используют основной цвет темы. Это можно изменить на «акцент» или «предупредить».

https://material.angular.io/components/progress-spinner/overview

пример

<mat-spinner color="warn"></mat-spinner>
1
Nour Lababidi

используйте этот код

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}
0
Mehrdad

Это лучше всего достигается путем создания пользовательской темы. 

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

0
GotStu

Этот ответ подойдет тем, кто ищет гибкое решение в Angular 4/6/7. Если вы не хотите менять цвет прядильщика на уровне компонентов, вам необходимо использовать селектор ::ng-deep , Зная это, решение довольно простое. 

  • В вашем HTML-файле:

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

  • В вашем файле CSS/SCSS:

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }
Обратите внимание, что класс .uploader-status css инкапсулирует компонент. Вы можете просто использовать ::ng-deep без использования класса, но тогда любые изменения, которые вы вносите в mat-spinner, появятся в других областях приложения. Проверьте это, чтобы узнать больше .

0
Erwol