css - 如何更改组件的 mat-slide-toggle/overwrite CSS 的颜色属性？

Question

有没有办法改变 Angular Material 组件库中 mat-slide-toggle 组件的颜色属性？如何覆盖其样式？

或者任何人都可以建议我任何其他用于 Angular 5 应用程序的滑动切换，例如 Material 滑动切换？

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;
}

以上代码在 Angular 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