如何为Angular Material组件的color指令定义自定义配色方案？

嘿，这个需求我之前做项目的时候刚好实现过，给你梳理一下具体步骤，保证能搞定自定义的hint、info这类配色：

1. 先在主题配置里添加自定义调色板 #

Angular Material的color指令是和主题绑定的，所以第一步要在你的主题文件（一般是styles.scss，或者专门的theme.scss）里定义新的调色板，然后把它加入到现有主题中：

// 先定义自定义的调色板，可以基于Material内置的调色板修改，也可以自己写色值
$hint-palette: mat.define-palette(mat.$gray-palette, 500, 300, 700); // 用灰色系做hint
$info-palette: mat.define-palette(mat.$blue-palette, 400, 200, 600); // 用蓝色系做info

// 扩展你的现有主题，把自定义调色板加进去
$custom-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
    // 新增我们的自定义配色项
    hint: $hint-palette,
    info: $info-palette
  )
));

// 别忘了把主题应用到整个应用
@include mat.all-component-themes($custom-theme);

2. 为组件添加自定义color的样式规则 #

默认情况下，Material组件只识别primary、accent、warn这三个color值，所以我们需要为目标组件（比如你用到的mat-button）添加对应的样式，让它能识别hint和info：

// 针对mat-button的自定义color样式
.mat-button-color-hint {
  @include mat.button-color($custom-theme, hint);
}

.mat-button-color-info {
  @include mat.button-color($custom-theme, info);
}

如果之后你想给其他组件（比如mat-icon、mat-chip）也用这些自定义配色，只需要类似地添加对应的混合宏即可：

// 比如mat-icon的自定义样式
.mat-icon-color-hint {
  @include mat.icon-color($custom-theme, hint);
}

3. 可选：解决TypeScript类型报错（如果需要） #

如果你用TypeScript开发，直接写color="hint"可能会出现类型提示错误，因为默认的ThemePalette类型里没有这两个值。这时候可以扩展Material的类型：

创建一个material-custom-colors.ts文件：

import { ThemePalette } from '@angular/material/core';

declare module '@angular/material/core' {
  export interface ThemePalette {
    hint?: 'hint';
    info?: 'info';
  }
}

然后在main.ts里导入这个文件，或者在tsconfig.json的include数组里加上它，这样TypeScript就会识别这两个自定义color值了。

最后测试一下 #

做完上面的步骤，你就可以像用原生配色一样使用自定义的color了：

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

内容的提问来源于stack exchange，提问作者Ling Vu