Как изменить свойство цвета для mat-slide-toggle / overwrite Css в компонентах

Question

У меня есть какой-либо способ изменить свойство цвета

mat-slide-toggle 

Или Может предложить мне любое переключение слайдов в угловое приложение, например, переключение слайдов материала.

Как перезаписать CSS? ...

Answer 1

Вы можете оформить слайдер с помощью следующего кода в файле component.css

:host /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ff0000;
}
:host /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #ff0000;
}

Answer 2

Вы можете изменить основной цвет mat-slide-toggle с помощью css ниже в ваших стилях компонентов.

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { background-color: #49c5b6; } /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { background-color: #49c5b6; } Приведенный выше код проверен на угловой версии 5 + и котораяработает.

Стили компонентов обычно применяются только к HTML в собственном шаблоне компонента.

Используйте проксирующий потомок / deep / для прокрутки теней, чтобы принудительно уменьшить стильчерез дерево дочерних компонентов во все представления дочерних компонентов.Комбинатор / deep / работает на любой глубине вложенных компонентов и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента.

Возможно, вам потребуется время, чтобы прочитатьподробнее о глубоких селекторах здесь.

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

Answer 3

Вы можете использовать scss mixin следующим образом:

@include mat-slide-toggle-theme(mat-light-theme($app-primary, $app-accent));

Где $app-primary и $app-accent - любые цветовые палитры.

Исходный код для миксина здесь , и вы можете создавать цветные поддоны здесь или здесь .

Answer 4

Я думаю, что вы можете перезаписать CSS по умолчанию для этого компонента.Вы можете увидеть пример здесь