有没有办法从 Angular Material 组件库中更改 mat-slide-toggle 组件的颜色属性？如何覆盖其样式？
或者任何人都可以建议我任何其他用于 Angular 5 应用程序的滑动切换，例如材料滑动切换？
【问题讨论】：
标签： css angular-material angular5
我相信 /deep/ 和 ::ng-deep 已被弃用，并且不想为我的 Angular 应用程序的 mat-slide-toggle 的简单需求定制托盘，所以我很感激提供的答案 6/ 9/21 由 Uyric。
mat-slide-toggle 在我的应用程序中默认为灰色配色方案，出于我的目的，我不打算禁用该控件；我只想在切换开关滑到“on”（最右边）位置时改变它的外观。
将这两行粘贴在全局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 是一些人认为应该避免或至少最小化的东西，但我发现它有必要在我的应用程序中工作。
【讨论】：
其他解决方案可用于更改静态元素的颜色，但不能更改涟漪效应。请在下面找到我们在全局 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);
}
【讨论】：
在 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 ;
}
【讨论】：
默认情况下，mat-slide-toggle 使用主题的强调色。所以要改变颜色，你可以试试这个：
<mat-slide-toggle color="primary">Slide Toggle!</mat-slide-toggle>
您可以从主要、重音、警告等更改颜色
【讨论】：
@nikojpapa's answer 这是更改 Angular Material 组件样式的推荐方法。我将在此处添加更多详细信息。
Slider Toggle 组件有一个名为 color 的属性，它需要一个 ThemePalette 值。可能的 ThemePalette 值为“primary”、“accent”和“warn”。这些与主题的主要、重音和警告调色板变体有关。该组件的颜色属性默认为'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 样式文件。要应用我们新定义的样式，样式数组应如下所示：
{
"projects" : {
"architect": {
"build": {
"styles" : [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./src/styles.scss"
]
}
}
}
}
【讨论】：
您可以在组件样式中使用以下 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/ 组合器适用于任何深度的嵌套组件， 它适用于视图子项和内容子项 组件。
您可以花点时间在此处阅读有关深度选择器的更多信息。
【讨论】：