更改Angular Material的md-slider的默认背景颜色 [英] Change default background color of md-slider of Angular Material

问题描述

我正在使用 Angular Material 版本2.0.0-beta.8

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

我选择了 indigo-pink 主题并将其导入 style.css

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.

显然，这是由 indigo-pink.css 文件中定义的以下CSS代码设置的:

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}

实际上，如果我更改 indigo-pink.css ，我会得到想要的东西，但这显然不是正确的方法.

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.

推荐答案

您可以使用::ng-deep覆盖预建样式表中的所有CSS类.

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

要对整个应用程序应用自定义更改，请将自定义类添加到根组件的样式表中，通常为styles.css.

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

css自定义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;
}

柱塞示例

这篇关于更改Angular Material的md-slider的默认背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！