如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS? [英] How to change color property of mat-slide-toggle/ overwrite CSS of component?

问题描述

有什么方法可以更改 Angular Material 组件库中 mat-slide-toggle 组件的颜色属性?如何覆盖其样式?

Is there any way to change color property of mat-slide-toggle component from the Angular Material component library? How to override its styling?

或者任何人都可以建议我任何其他 angular 5 应用程序的滑动切换，例如材料滑动切换?

Or can anyone suggest me any other slide toggle for angular 5 applications, like material slide toggle?

推荐答案

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

You can change the primary colour of the mat-slide-toggle with the below css in your component styles.

/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+ 版本上进行了测试，并且可以正常工作.

The above code is tested on angular 5+ version and which is working.

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

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

使用 /deep/ 穿透阴影的后代组合器来强制样式通过子组件树向下进入所有子组件意见./deep/ 组合器适用于任何深度的嵌套组件，它同时适用于视图的孩子和内容的孩子组件.

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.

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

You may please take time to read more about the deep selectors here.

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

这篇关于如何更改 mat-slide-toggle 的颜色属性/覆盖组件的 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！