我有兩個墊子復選框，我正在嘗試更改每個復選框的顏色，一個是綠色，另一個是紅色，但是我發現兩種顏色都發生了變化，我嘗試通過添加一個類來更改它們，但是沒有用，在這里是代碼：
<div class="half right">
<mat-checkbox color="" class="entradaCheck">Coming</mat-checkbox>
<mat-checkbox color="primary" class="salidaCheck">Exit</mat-checkbox>
</div>
的CSS
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: rgb(15, 91, 33) !important;
}
::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
background-color: rgb(15, 91, 33) !important;
}
我所做的嘗試
.entradaCheck::ng-deep .mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: rgb(15, 91, 33) !important; }
.entradaCheck::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
background-color: rgb(15, 91, 33) !important; }
uj5u.com熱心網友回復：
我建議不要使用 ::ng-deep，因為它已被棄用：https ://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
StackBlitz 示例：https ://stackblitz.com/edit/kingsbury-angular-w-material-j8ufpw?file=src/app/app.component.html,src/styles.scss,src/main.ts
您應該能夠為根 sstyles.scss (src/app/styles.scss) 中的類應用樣式，如下所示：
mat-checkbox.mat-checkbox-checked {
&.entradaCheck .mat-checkbox-background {
background-color: rgb(15,91,33) !important;
}
}
如果使用styles.css：
mat-checkbox.mat-checkbox-checked.entradaCheck .mat-checkbox-background{
background-color: rgb(15,91,33) !important;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531389.html
上一篇：CSS屬性在角度中無法正常作業