Как изменить свойство цвета mat-slide-toggle / overwrite CSS компонента?

Вы можете изменить основной цвет 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+ и работает.

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

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

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

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

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

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

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

Ответ @ nikojpapa - это рекомендуемый метод изменения стилей компонентов Angular Material. Я добавлю здесь немного подробностей.

Компонент Slider Toggle имеет свойство с именем color, которое ожидает значение ThemePalette. Возможные значения ThemePalette: primary, accent и warn. Они относятся к основным, акцентным и предупреждающим вариантам цветовой палитры темы. Свойство цвета этого компонента по умолчанию - «акцент».

Итак, чтобы настроить цвета, нам нужно предоставить цветовую палитру в качестве акцента в теме. Предположим, мы хотим изменить только стили компонента слайдера.

Сделать это:

1. Нам нужно определить новую цветовую палитру, которая соответствует нашим потребностям.
2. Нам нужно создать новую тему, передав нашу цветовую палитру в качестве варианта, используемого компонентом переключения ползунка (например, если цвет переключателя ползунка является «основным», нам нужно создать тему с нашей цветовой палитрой в качестве основного варианта) .
3. Нам нужно изменить тему переключателя ползунка на нашу новую тему.

Все эти шаги мы выполняем в файле styles.scss приложения Angular.

Пример:

/* styles.scss */

/* required set-up */
@import '~@angular/material/theming';
@include mat-core();

/** 1. Define new color palette. */
$md-custom-toggle-colors: (
  50 : #e8f6e9,
  100 : #c5e9c8,
  200 : #9fdaa4,
  300 : #79cb7f,
  400 : #5cc063,
  500 : #3fb548,
  600 : #39ae41,
  700 : #31a538,
  800 : #299d30,
  900 : #1b8d21,
  A100 : #c6ffc9,
  A200 : #93ff98,
  A400 : #60ff67,
  A700 : #47ff4f,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #000000,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

/**
2. Create new theme, passing above palette as the required variant.
Since the default variant of the Slider Toggle is 'accent', we will pass the above palette as such.
*/
$custom-toggle-theme: mat-light-theme(mat-palette($mat-red), mat-palette($md-custom-toggle-colors));


/** 3. Set new theme as slider toggle theme. */
@include mat-slide-toggle-theme($custom-toggle-theme);

Убедитесь, что вы включили этот файл styles.scss в массив стилей в файле angular.json. Обратите внимание, что здесь важен порядок файлов стилей - более поздние файлы заменяют стили, определенные в предыдущих файлах.

Вероятно, у вас уже есть готовый файл стиля Angular Material, включенный в массив. Чтобы применить наши недавно определенные стили, массив стилей должен выглядеть примерно так:

{
  "projects" : {
    "architect": {
      "build": {
        "styles" : [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./src/styles.scss"
        ]
      }
    }
  }
}

По умолчанию mat-slide-toggle использует основной цвет темы, поэтому, чтобы изменить цвет, вы можете попробовать следующее:

<mat-slide-toggle color = "primary">Slide Toggle!</mat-slide-toggle>

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

В angular 12 используйте :host и ::ng-deep в вашем компоненте css вместо /deep/.

Пример:

:host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #49c5b6 ;
}

:host ::ng-deep  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #49c5b6 ;
}

Другие решения были полезны для изменения цвета статических элементов, но не для эффекта ряби. Ниже вы найдете то, что мы используем в глобальном файле CSS:

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgb(128, 203, 196);
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: rgb(29, 135, 229);
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-ripple .mat-ripple-element {
    background-color: rgba(29, 135, 229, .2);
}