代码之家 › 专栏 › 技术社区 › Baltr

:host::ng depth不将样式应用于材质复选框

angular-material angular css javascript

Baltr · 技术社区 · 2 年前

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

我都试过了

.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> 本身,然后做 mat-select.class .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important: } 进入styles.css,但这似乎也不起作用

1 回复 | 直到 2 年前

Naren Murali 2 年前

您需要将类添加到 panelClass 属性,请在下面找到更改!

Material Select API Reference

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>

stackblitz