如何更改 Angular Material 18 的垫片背景颜色

Question

我不明白新的 Material 主题。

如何让背景变成绿色？

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

我阅读了API文档，但没有成功。

芯片的主题颜色。此 API 仅在 M2 主题中受支持，它 对 M3 主题没有影响。

有关在 M3 中应用颜色变体的信息，请参阅 https://material.angular.io/guide/theming#using-component-color-variants。

Answer 1

我对 mat-select mat-header 和 mat-snackbar 组件也有类似的问题。对我有用的是通过源文件夹中的

theme.scss

文件更改颜色。以我为例

.black-snackbar {
  --mdc-snackbar-supporting-text-color: white;
  --mdc-snackbar-container-color: #303030;
  --mat-mdc-snack-bar-button-color: #2e98a3;
}

.header-panel.mat-mdc-select-panel {
  background: #2e98a3;
}
.mat-horizontal-stepper-header {
  pointer-events: none;
}

注意：这是针对 Angular 15 的。