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

Posted 2023-05-07

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

【英文标题】：Change color of Angular Material component mat-list-option checkbox for checked background, frame and check mark

【发布时间】：2021-07-07 23:01:47

【问题描述】：

在 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 不会产生结果。

【参考方案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

【讨论】：

您好，感谢您的回答。我已经尝试过这段代码，但它只改变了背景。我的目标也是改变框架和复选标记颜色（我错过了在我的帖子中注意最后一个）请检查编辑

@iose936 我已经更新了答案以包括框架和检查，希望这能让你更接近你的需要。