Angular Material组件自定义颜色实现方案咨询

1. 扩展自定义调色板（官方推荐方式） #

如果你的自定义颜色需要跨组件复用，或者需要匹配Material规范的交互状态变体（hover、active等），推荐基于Material的调色板系统扩展：

• 定义自定义调色板
  在主题文件（比如styles.scss）中，用mat.definePalette创建专属调色板，既可以基于现有调色板修改色阶，也能完全自定义颜色值：

// 基于现有绿色调色板，指定按钮默认、hover、active对应的色阶
$approval-green-palette: mat.define-palette(
  mat.$green-palette,
  600, // 默认背景色
  400, // hover状态色
  800  // 按下状态色
);

// 若要完全自定义颜色，可直接传入色值映射（包含对比色适配）：
// $approval-green-palette: mat.define-palette({
//   50: '#e8f5e9',
//   100: '#c8e6c9',
//   900: '#1b5e20',
//   contrast: {
//     50: '#000000',
//     900: '#ffffff'
//   }
// });

• 生成按钮样式类
  用mat.button-theme mixin，基于自定义调色板生成符合Material规范的按钮样式：

.approval-green-btn {
  @include mat.button-theme($approval-green-palette);
}

• 在模板中使用
  直接给按钮添加自定义类即可：

<button mat-raised-button class="approval-green-btn">审批文档</button>

2. 快速自定义单个颜色（无需完整调色板） #

如果这个绿色仅用于特定按钮，不需要复用色阶，可直接写自定义样式，同时保留Material按钮的基础布局规范（避免破坏组件逻辑）：

.approval-green-btn {
  // 自定义基础色
  background-color: #2e7d32;
  color: #ffffff;

  // 匹配Material的交互状态
  &:hover {
    background-color: #388e3c;
  }

  &:active {
    background-color: #1b5e20;
  }

  // 继承Material按钮的基础布局样式（圆角、内边距等）
  @include mat.button-base;
}

3. 要不要为每个颜色定义调色板？ #

• 若颜色需要跨组件复用（比如按钮、提示框、图标都要用这个绿），且需要不同深浅的变体，建议定义完整调色板，方便统一管理和维护。
• 若只是单一按钮的特殊颜色，直接写自定义样式即可，无需额外定义调色板。

关于直接覆盖CSS属性 #

官方不推荐直接覆盖Material组件的原生类（比如.mat-raised-button），因为这样可能破坏组件的状态逻辑和响应式行为。上面两种方法都是基于Material的mixin或规范扩展，比硬覆盖CSS更稳妥。

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