：主机 ::ng-deep 未将样式应用于材质复选框

Question

我正在尝试为材质多选做一个简单的复选框背景颜色更改。

我尝试过两者都做

.mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

和

:host ::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

在 component.css 中，但它们都不起作用，我不想让它保持原样

::ng-deep .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; }

因为它会渗透到其他组件中，这意味着 ViewEncapsulation.None 并在主 styles.css 文件中执行它是不可能的。谢谢您的协助。

编辑：我还尝试向

<mat-select>

本身添加一个类，然后在 styles.css 中执行

mat-select.class .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important: }

，但这似乎也不起作用

Answer 1

您需要将类添加到

panelClass

属性，请在下面找到更改！

材质选择API参考

CSS

.custom-checkbox-color .mat-pseudo-checkbox-checked {
  background-color: #a9a9a9 !important;
}

html

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select
    [formControl]="toppings"
    multiple
    panelClass="custom-checkbox-color"
  >
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

堆栈闪电战