Как изменить цвет фона мат-чипа Angular Material 18
Я не понимаю новую тему Material.
Как сделать фон зеленым?
<mat-chip class = "make-green">
Hello World
</mat-chip>
Я читал документацию API, но безуспешно.
Цвет темы чипа. Этот API поддерживается только в темах M2. не имеет никакого эффекта в темах M3.
Информацию о применении вариантов цвета в M3 см. https://material.angular.io/guide/theming#using-comComponent-color-variants.
у меня его нет
Ответы 2
У меня были похожие проблемы с компонентами 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.
это не тот подход к созданию тем, который они рекомендуют. И это все равно не будет работать на Angular 18.
Это так просто:
<mat-chip style = "--mdc-chip-elevated-container-color: lightgreen;">
One fish
</mat-chip>
Можете ли вы сказать, где вы нашли документацию для этого?
документации нет. Я проверил инструменты разработчика браузера.
Можете ли вы поделиться с нами своим файлом темы индивидуального материала, пожалуйста?