如何为Angular mat-chip设置primary等预设外的自定义颜色

mat-chip的color属性仅支持内置的primary/accent/warn三个固定值，无法直接传自定义颜色名，你可以通过以下两种方案实现需求：

方案1：自定义CSS类实现（推荐，可复用性高） #

第一步：添加样式 #

你可以选择把样式放在全局styles.scss文件中，或者组件对应的样式文件中：

• 如果放在全局样式文件，直接写以下代码：

// 自定义assigned状态的绿色chip
.mat-chip.green-chip {
  background-color: #4CAF50; // 按需调整绿色色值
  color: #ffffff; // 文字颜色按需调整
}

// 自定义verification状态的黄色chip
.mat-chip.yellow-chip {
  background-color: #FFEB3B; // 按需调整黄色色值
  color: rgba(0,0,0,0.87); // 文字颜色按需调整
}

• 如果放在组件样式文件，需要加穿透前缀避免视图封装拦截：

:host ::ng-deep .mat-chip.green-chip {
  background-color: #4CAF50;
  color: #ffffff;
}

:host ::ng-deep .mat-chip.yellow-chip {
  background-color: #FFEB3B;
  color: rgba(0,0,0,0.87);
}

第二步：修改HTML代码 #

替换原来的color属性配置，改为绑定自定义类即可：

<mat-chip *ngIf="status.name==='open'" color="warn" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='pending'" color="accent" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='assigned'" class="green-chip" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='verification'" class="yellow-chip" selected trans>{{status.display_name}}</mat-chip>

如果你需要全局把所有组件的primary主题色都改成绿色，只需要修改你的Angular Material自定义主题配置，替换primary调色板为绿色系即可：

$custom-primary: mat.define-palette(mat.$green-palette);
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
));
@include mat.all-component-themes($custom-theme);

修改后原来的color="primary"配置就会自动显示为绿色，不需要额外加自定义类。

方案2：内联样式实现（应急快速使用） #

如果不需要复用样式，直接在标签上写内联样式即可：

<mat-chip *ngIf="status.name==='assigned'" style="background-color: #4CAF50;color:#fff;" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='verification'" style="background-color: #FFEB3B;color:rgba(0,0,0,0.87);" selected trans>{{status.display_name}}</mat-chip>

内容的提问来源于stack exchange，提问作者andyiscoding