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

Question

在Angular应用程序中，使用Angular Material

我已经为 <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;
}

但我找不到对复选框 checked background、frame 和 check 执行相同操作的方法标记:

<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

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

Change color of Angular Material component mat-list-option checkbox for checked background, frame and check mark

css

sass

angular-material

angular-components

angular