如何修改Angular Material 18中mat-chip的背景颜色

核心前提 #

芯片的主题颜色API仅支持M2主题，在M3主题中完全无效，必须采用M3专属的组件颜色变体配置方式。

实现方法 #

方法1：自定义CSS变量（快速生效）

在全局样式文件（如styles.scss）中添加以下样式：

.make-green {
  --md-sys-color-primary: #2e7d32; /* 替换为你需要的绿色色值 */
  --md-chip-container-color: var(--md-sys-color-primary);
  --md-chip-label-text-color: var(--md-sys-color-on-primary); /* 保证文字与背景的对比度 */
}

你的原有HTML代码无需修改：

<mat-chip class="make-green"> Hello World </mat-chip>

方法2：主题层面自定义变体（全局统一配置）

如果需要在主题中统一定义绿色芯片样式，可在主题文件中扩展M3主题：

@use '@angular/material' as mat;

// 定义绿色调色板
$custom-green-palette: mat.define-palette(mat.$green-palette);
// 创建包含绿色主色的自定义主题
$custom-green-theme: mat.define-theme(
  color: mat.define-color-config(
    primary: $custom-green-palette
  )
);

// 为mat-chip绑定自定义主题
.mat-chip.make-green {
  @include mat.chip-theme($custom-green-theme);
}

同样使用原有HTML代码即可生效。

补充提示：M3主题的颜色变体应用逻辑需遵循Angular Material官方文档中「使用组件颜色变体」的规范。

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