Angular Material mat-chip 上的文本颜色

Question

我有一个mat-chip-set和几个mat-chip带有自定义类的对象product-chip：

<mat-chip-set>
  <mat-chip class="product-chip" *ngFor="let category of categories">
    {{category}}
  </mat-chip>
</mat-chip-set>

我的CSS是：

.product-chip {
  background-color: pink !important;
  color: white !important;
}

结果是芯片背景颜色是我想要的粉红色，但文本颜色仍然是黑色。

如何将mat-chip对象的文本颜色设置为白色？

请参阅 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg ?file=src/app/chips-overview-example.html

Answer 1

我会编辑使用的变量。

style.css

.mat-mdc-standard-chip {
  --mdc-chip-label-text-color: #fff;
}

另外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。

.mat-mdc-standard-chip {
  --mdc-chip-elevated-container-color: #e0e0e0;
  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
  --mdc-chip-label-text-color: #fff;
  --mdc-chip-disabled-label-text-color: #212121;
  --mdc-chip-with-icon-icon-color: #212121;
  --mdc-chip-with-icon-disabled-icon-color: #212121;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #212121;
  --mdc-chip-with-icon-selected-icon-color: #212121;
}

示例： https: //stackblitz.com/edit/angular-nzhkmg-dk3hsm? file=src%2Fstyles.scss