How change color property of mat-slide-toggle/ overwrite Css in components

问题

I there any way to change color property of

mat-slide-toggle

Or Can suggest me any slide toggle to angular 5 application like material slide toggle.

How to overwrite css?...

回答1:

I think you can overwrite the default css of this component. You can see the example here

回答2:

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

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

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.

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

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

回答3:

You can use the scss mixin like this:

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

Where $app-primary and $app-accent are any color palettes.

Source code for the mixin is here, and you can generate color pallets here or here.

回答4:

You can style the slider with the following code, in your component.css file

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

来源：https://stackoverflow.com/questions/50838843/how-change-color-property-of-mat-slide-toggle-overwrite-css-in-components

标签

css

angular5