Question

我有办法改变

的颜色属性

mat-slide-toggle

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

如何覆盖css？...

Answer 1

您可以在组件样式中使用以下CSS更改mat-slide-toggle的原色。

/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 2

我认为你可以覆盖这个组件的默认css。您可以看到示例here

Answer 3

@nikojpapa's answer是推荐的更改Angular Material组件样式的方法。我将在此处添加更多详细信息。

“滑块切换”组件具有名为color的属性，该属性期望值为ThemePalette。可能的ThemePalette值是“主要”，“重音”和“警告”。这些与主题的主要，强调和警告调色板变体有关。该组件的color属性默认为'accent'。

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

为此：

我们需要定义一个适合我们需求的新调色板。
我们需要创建一个新主题，将调色板作为滑块切换组件正在使用的变体传递（例如，如果滑块切换颜色为“主要”，我们需要使用调色板作为主题来创建主题主要变体）。
我们需要将滑块开关的主题更改为新定义的主题。

我们在Angular应用的styles.scss文件中完成所有这些步骤。

示例：

/* 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样式文件。要应用我们新定义的样式，styles数组应如下所示：

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

Answer 4

默认情况下，mat-slide-toggle使用主题的强调色。因此，要更改颜色，您可以尝试以下方法：

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

您可以从主要颜色，强调颜色，警告颜色等更改颜色。

Answer 5

在 angular 12 中，在您的 css 组件中使用 :host 和 ::ng-deep 而不是 /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 ;
}

Answer 6

您可以像这样使用scss mixin：

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

$app-primary和$app-accent是任何调色板。

mixin的源代码为here，您可以生成调色板here或here。

Answer 7

您可以在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 8

其他解决方案对于改变静态元素的颜色很有用，但对涟漪效果没有帮助。请在下面找到我们在全局 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);
}

Answer 9

我相信 /deep/ 和 ::ng-deep 已被弃用，并且不想费心为我的简单需求定制托盘，并为我的 Angular 应用程序使用 mat-slide-toggle，所以我感谢提供的答案 6/ 9/21 by Uyric。

mat-slide-toggle 在我的应用程序中默认为灰色配色方案，出于我的目的，我不打算禁用控件；我只希望在切换开关滑动到“打开”（最右侧）位置时它的外观发生变化。

将这两行粘贴到全局styles.css文件的底部，当控件被切换时，控件的拇指从浅灰色变为浅绿色，拇指下方的条从深灰色变为深绿色。

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #7cf27c !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: #478b47 !important;
}

我的理解是在 CSS 中使用 !important 是一些人认为应该避免或至少最小化的东西，但我发现它有必要在我的应用程序中工作。

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

9 个答案: