更改默認化背景色

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