angular-material2 - 更改 Angular Material 的 md-slider 的默认背景颜色

Question

我正在使用 md-slider的 角料 版本 2.0.0-beta.8

我选择了靛蓝色主题并将其导入 样式.css

我对我所拥有的非常满意，但我只想更改 slider handle 和缩略图的背景颜色。

显然这是由 中定义的以下 css 代码设置的。靛蓝粉红色.css 文件:

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

事实上，如果我改变 靛蓝粉红色.css 我得到了我想要的，但这显然不是正确的方式。

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

Answer 1

您可以使用 ::ng-deep覆盖预建样式表中的任何 css 类。

要对整个应用应用自定义更改，请将自定义类添加到根组件的样式表中，通常为 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 example