如何在Angular Material中为按钮自定义新颜色属性？

Angular Material的按钮color属性只支持框架预定义的primary、accent、warn三个值，没法直接新增secondary这类自定义枚举值——因为组件内部的@Input() color是硬编码的字面量类型，只能识别这三个关键字。要实现自定义颜色，有两种常用方法：

方法一：直接写自定义CSS类（快速简单） #

在你的duck.component.scss里添加样式：

// 自定义secondary按钮样式
.mat-raised-button.secondary-btn {
  background-color: #673ab7; // 替换成你想要的背景色
  color: #ffffff; // 文字颜色
  // 可选：添加hover、点击状态的样式
  &:hover {
    background-color: #512da8;
  }
  &:active {
    background-color: #4527a0;
  }
}

然后在模板里给按钮加这个类：

<button mat-raised-button class="secondary-btn">Button</button>

方法二：扩展Material主题（适合全局复用） #

如果想让自定义颜色和现有Material主题体系融合，方便在多个组件复用，可以扩展主题文件：

1. 打开项目的主题文件（一般是src/styles.scss），添加自定义调色板和样式mixin：

@import '@angular/material/theming';

// 1. 定义自定义调色板（可以用内置调色板，也可以自己写颜色值）
$secondary-palette: mat-palette($mat-deep-purple);

// 2. 定义生成自定义按钮样式的mixin
@mixin custom-button-styles($theme) {
  $secondary-color: mat-color($secondary-palette);
  $secondary-hover: mat-color($secondary-palette, 700);
  $secondary-active: mat-color($secondary-palette, 800);

  .mat-raised-button.secondary-btn {
    background-color: $secondary-color;
    color: mat-contrast($secondary-palette, default); // 自动适配文字对比度
    &:hover {
      background-color: $secondary-hover;
    }
    &:active {
      background-color: $secondary-active;
    }
  }
}

// 3. 应用主题和自定义样式
$app-theme: mat-light-theme(
  $primary: mat-palette($mat-indigo),
  $accent: mat-palette($mat-pink),
  $warn: mat-palette($mat-red)
);

@include angular-material-theme($app-theme);
@include custom-button-styles($app-theme);

之后在模板里同样用class="secondary-btn"即可，这种方式的好处是自定义颜色会遵循Material的调色板规则，还能自动处理对比度。

另外补充下：Angular Material的颜色体系是基于调色板（palette）构建的，每个主题包含primary、accent、warn三个核心调色板，框架会根据按钮的color属性值，自动给按钮添加对应的mat-primary、mat-accent等类，从而应用主题里的颜色。

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