时间戳

首页 > 解决方案 > Angular Material 自定义颜色属性/指令

angular - Angular Material 自定义颜色属性/指令

问题描述

如何在color出现在各种 Material 组件中的指令上定义自定义 Angular Material 颜色：

<button mat-button color="accent" (click)="back()">{{ 'Back' | translate }}</button>
<button mat-button color="primary" (click)="next()">{{ 'Next' | translate }}</button>

我想添加另一种配色方案，例如hintor info。

<button mat-button color="hint">{{ 'Hint' | translate }}</button>

我在哪里可以定义这些颜色？

标签： angular

解决方案

这是两种不同的解决方案：

1. 编辑 Angular Material 主题的调色板

如果您想在应用程序中全局编辑此信息，您可以创建自己的 Angular Material Theme 并扩展您正在使用的主题。有关 Angular 材质主题的更多信息：https ://material.angular.io/guide/theming

以一种不太合适的方式，您还可以编辑style.css您的应用程序以将全局样式应用于您的应用程序。

2.编辑子组件的样式

在您的情况下，您可能希望编辑输入的颜色，而不用在您的应用程序中使用相同的颜色更改每个输入（例如：）color="primary"。

您可以使用::ng-deep在子组件上应用样式。

ng-deep目前已弃用，但暂时没有替代品。文档是这样说的：“继续使用 ::ng-deep 及其替代品，直到创建替代品 - 弃用只是一个早期通知，这样人们就不会在实际变化发生时措手不及。”

推荐阅读