Угловой материал

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

Помещения Цвет шага прогресса может быть изменен с использованием свойства цвета. По умолчанию, движущиеся ролики используют основной цвет темы. Это можно изменить на "акцент" или "предупреждение".

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

пример

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

Ответ 5

Поздно до игры, но это хорошо сработало в моем файле .scss сегодня...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}

Ответ 6

К вашему стилю файла компонентов .css/.scss добавьте (он будет работать локально - только в компоненте)

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}

Ответ 8

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

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

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

Ответ 9

Образец цвета, ширина, диаметр и заголовок

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>

Ответ 10

HTML-код mat-spinner:

<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>

А теперь нахальный код:

.mat-spinner {
    ::ng-deep circle {
        stroke: #33dd82;
    }
}

Ответ 11

В случае, если вы, ребята, хотите настроить каждый счетчик на своей веб-странице. Вы можете сделать это следующим образом:

svg .mat-progress-spinner circle, .mat-spinner circle {
  stroke: inherit;
}

А теперь на mat-spinner добавьте класс:

<mat-spinner class="custom-spinner-color"></mat-spinner>

И в файле css:

.withdraw-deposit-modal-spinner{
  stroke: #234188;
}

Этого я и хотел достичь. Полагаю, если вы посмотрите на этот вопрос, вы, вероятно, захотите того же.