更改默认化背景色

Question

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

我在选择靛蓝粉主题并将其导入style.css的

我与我有什么很高兴，但我想改变只是滑块的背景颜色处理和缩略图的。

显然，这是在靛蓝pink.css文件中定义下面的CSS代码中设置：

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

事实上，如果我改变靛蓝pink.css我得到我想要的东西，但这显然不是正确的方法。

因此，这是正确的方式问题，改变只是滑块处理和缩略图颜色，以及一般性的原因，如何只改变一些类的角材料的主题定义的属性。

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

Answer 2

:: NG-深覆盖的主题类的方式，由Nehal说。

看起来虽然它不起作用，如果你连接更多的类。换句话说，下面的代码无法正常工作

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

而代码以下版本的实际工作，并有效地覆盖在主题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; 
}