如何在垫选择选项中自定义垫复选框的颜色

Question

如何在垫选择选项中自定义垫复选框的颜色，如下所示

<mat-form-field appearance="fill" style="width:49%">
    <mat-label>Select Group</mat-label>
        <mat-select [(ngModel)]="groupNames" name="group" multiple>
            <mat-option *ngFor="let group of GroupList" [value]="groupName">
                {{groupName}}
            </mat-option>
        </mat-select>
</mat-form-field>

我尝试检查浏览器中的元素和样式，发现有这个类

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: var(--mat-full-pseudo-checkbox-selected-icon-color);
    border-color: rgba(0, 0, 0, 0);
}

这影响了复选框的背景颜色（我想自定义），但是当我的角度项目中的CSS文件中覆盖相同的类时，更改没有反映出来

Answer 1

如果要覆盖组件内的样式，则需要在类的前缀上使用

::ng-deep

（已弃用）。

::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    background-color: red !important;
    border-color: yellow !important;
}