如何在组件中更改mat-slide-toggle/overwrite Css的颜色属性

Question

我有什么方法可以改变颜色属性

mat-slide-toggle 

或者可以建议我任何幻灯片切换到角度5应用程序,如材料幻灯片切换.

如何覆盖css？...

Answer 1

那么如何更改 Angular 垫滑块的颜色。我的回答仅限于角度 15+：

一般来说，您只需要更改switch theme颜色即可。但是我不知道如何实现，并且提供了不太优选的解决方案：

// rewrite Angular 15 switchers new look
@use '@material/switch/switch' as mdc-switch;
@use '@material/switch/switch-theme' as mdc-switch-theme;

$_color-selected-handle:red;
$_color-unselected-handle:green;

$_color-unselected-track: grey;
$_color-selected-track: purple;
$_color-disabled-selected-track: $_color-selected-track;
$_color-disabled-unselected-track: $_color-unselected-track;

.mat-mdc-slide-toggle {

  .mdc-switch {

    @include  mdc-switch-theme.theme((
//handle color
      disabled-selected-handle-color: $_color-selected-handle,
      disabled-unselected-handle-color: $_color-unselected-handle,

      selected-handle-color: $_color-selected-handle,
      selected-focus-handle-color: $_color-selected-handle,
      selected-hover-handle-color: $_color-selected-handle,
      selected-pressed-handle-color: $_color-selected-handle,

      unselected-handle-color: $_color-unselected-handle,
      unselected-focus-handle-color: $_color-unselected-handle,
      unselected-hover-handle-color: $_color-unselected-handle,
      unselected-pressed-handle-color: $_color-unselected-handle,


//tracks color
      disabled-selected-track-color: $_color-selected-track,
      disabled-unselected-track-color: $_color-unselected-track,

      selected-track-color: $_color-selected-track,
      selected-focus-track-color: $_color-selected-track,
      selected-hover-track-color: $_color-selected-track,
      selected-pressed-track-color: $_color-selected-track,


      unselected-track-color: $_color-unselected-track,
      unselected-focus-track-color: $_color-unselected-track,
      unselected-hover-track-color: $_color-unselected-track,
      unselected-pressed-track-color: $_color-unselected-track,
// icon colors

      disabled-selected-icon-color:  $_color-selected-handle,
      disabled-unselected-icon-color: $_color-unselected-handle,
      selected-icon-color: $_color-selected-handle,
      unselected-icon-color: $_color-unselected-handle,

    ));

  }
}

所以它允许改变外观 到

Answer 2

您可以mat-slide-toggle在组件样式中使用以下css 更改其主要颜色.

mat-slide-toggle 以上代码在角度5+版本上进行了测试,并且正在运行.

组件样式通常仅适用于组件自己的模板中的HTML.

使用/ deep / shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中.该/深/组合子工程,以嵌套组件的任何深度,并且它适用于儿童观和成分的含量子女双方.

您可以请花时间阅读更多有关深度选择器的信息.

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

Answer 3

默认情况下，mat-slide-toggle 使用主题的强调色。所以要更改颜色，您可以试试这个：

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

您可以从主要、重音、警告等更改颜色

Answer 4

@nikojpapa 的答案是更改 Angular Material 组件样式的推荐方法。我将在这里添加更多细节。

Slider Toggle 组件有一个名为的属性，color该属性需要一个ThemePalette值。可能的 ThemePalette 值为“primary”、“accent”和“warn”。这些与主题的主要、强调和警告调色板变体相关。该组件的颜色属性默认为“accent”。

因此，要自定义颜色，我们需要提供一个调色板作为主题的重点。假设我们只想更改滑块组件的样式。

去做这个：

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文件包含在文件内的 styles 数组中angular.json。请注意，样式文件的顺序在这里很重要 - 后面的文件将替换前面文件中定义的样式。

您可能已经在数组中包含了一个预构建的 Angular Material 样式文件。要应用我们新定义的样式，样式数组应如下所示：

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

Answer 5

在 angular 12 中使用:hostand::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 ;
}