Text color on Angular Material mat-chip

Question

I have a mat-chip-set and several mat-chip objects with a custom product-chip class:

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

my css is:

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

The result is that the chip background color IS pink like I want, however the text color is still black.

How can I make the text color of the mat-chip objects white?

See StackBlitz Example: https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html

Answer 1

I would edit the variables used.

style.css

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

Also, check what other options do, to keep styling consistent when chips are in some other state (disabled).

.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;
}

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