Change default background color of md-slider of Angular Material

问题

I am using md-slider of Angular Material version 2.0.0-beta.8

I have selected the indigo-pink theme and imported it in style.css

I am pretty happy with what I have, but I would like to change just the background color of the slider handle and of the thumbnail.

Apparently this is set by the following css code defined in the indigo-pink.css file:

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}

In fact, if I change indigo-pink.css I obtain what I want, but this is clearly not the right way.

So the question which is the right way to change just slider handle and thumbnail color, and for the sake of generality, how to change only some of the attributes of the classes defined in a theme of Angular Material.

回答1:

You can use ::ng-deep override any css class from the prebuilt stylesheet.

To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.

css to customize md-slide-toggle:

/* CSS to change Default/'Accent' color */

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: blue; /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: skyblue;  /*replace with your color*/
}

/* CSS to change 'Primary' color */

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: green;
}

::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ff99ff;
}

/* CSS to change 'Warn' color */

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: red;
}

::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #ffe066;
}

Plunker example

回答2:

::ng-deep is the way to override theme classes, as stated by Nehal.

It seems though that it does not work if you concatenate more classes. In other words the following code does NOT work

::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: black;
}

while the following version of the code actually works and overrides effectively the values set in the theme css

::ng-deep .mat-accent .mat-slider-thumb {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-thumb-label {
    background-color: black;
} 
::ng-deep .mat-accent .mat-slider-track-fill {
    background-color: black;
}

回答3:

Angular material components are using themes https://material.angular.io/guide/theming

Slider's background colors can be changed this way:

@include mat-slider-theme(map_merge(mat-light-theme, (
    accent: mat-palette(map_merge($mat-deep-orange, (
        500: green,
    ))),
    foreground: (
        base: #848484,
        slider-min: white,
        slider-off: #bebebe,
        slider-off-active: #bebebe,
    ),
)));

回答4:

Here is how I solved in just a few minutes and got it working.
Add this two-line in style.css, not in component CSS.

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #0056ff;//Your color
}

来源：https://stackoverflow.com/questions/45389498/change-default-background-color-of-md-slider-of-angular-material

标签

angular-material2