更改 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

我选择了靛蓝色主题并将其导入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.

所以问题是什么是改变slider handle和thumbnail颜色的正确方法，为了一般性，如何只改变一些属性Angular Material 主题中定义的类.

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

Plunker 示例

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