更改已检查背景、框架和复选标记的 Angular Material 组件 mat-list-option 复选框的颜色

Question

在 Angular 应用程序中，使用 Angular 材质

我已经改变了<mat-checkbox>My Checkbox</mat-checkbox> 检查背景和框架的颜色，如下所示：

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: rgb(130, 238, 148);
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
  background-color: rgb(251, 255, 0) !important;
}

但我找不到对复选框选中背景、框架和选中标记执行相同操作的方法：

<mat-selection-list>
  <mat-list-option
    *ngFor="let dt of data"
    [value]="dt.value"
  >
    {{ dt.myValue }}
  </mat-list-option>
</mat-selection-list>

使用相同的::ng-deep 和.mat-list-option .mat-list-option-frame 不会产生结果。

Answer 1

您可以使用一组不同的规则更改selection-list 复选框。在这里，我更改了强调色复选框：

::ng-deep {

  .mat-accent .mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox-indeterminate {
    background: green;
  }

  .mat-accent .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
    border-color: blue;
  }

  .mat-accent .mat-pseudo-checkbox::after {
    color: red;
  }
}

https://stackblitz.com/edit/angular-ubma2v?file=src%2Fapp%2Flist-selection-example.scss