Angular Material 19（M3）中如何单独设置Mat-Button颜色？

问题背景 #

当前使用Angular Material 19.0.3 + M3主题，原M2中通过color="danger"设置按钮颜色的方式失效，需要实现确认对话框中确认按钮为绿色、取消按钮为红色的效果。

现有style.scss配置：

html {
  color-scheme: light dark;
  @include mat.theme((color: (
        primary: ft-green-theme.$primary-palette,
        tertiary: ft-green-theme.$tertiary-palette,
      ),
      typography: InterVariable,
      density: 0));

  &[dir='rtl'] {
    @include mat.theme((typography: IranSans,
      ));
  }
}

body.light {
  color-scheme: light;
}

body.dark {
  color-scheme: dark;
}

解决方案 #

M3主题系统不再支持color属性指定非主题色调（如danger），可通过以下几种方式实现需求：

方案1：利用主题内置调色板（推荐） #

M3默认支持primary、error等标准色调，只需在主题中配置对应调色板，再用内置类指定按钮色调：

1. 更新主题配置，添加error调色板（对应红色）：

html {
  color-scheme: light dark;
  @include mat.theme((
    color: (
      primary: ft-green-theme.$primary-palette, // 你的绿色主色调
      tertiary: ft-green-theme.$tertiary-palette,
      error: mat.$red-palette, // 内置红色调色板，也可替换为自定义红色
    ),
    typography: InterVariable,
    density: 0
  ));

  &[dir='rtl'] {
    @include mat.theme((typography: IranSans));
  }
}

2. 在按钮上使用对应色调类：

<!-- 确认按钮：默认使用primary色调（绿色） -->
<button mat-flat-button>确认</button>
<!-- 取消按钮：使用error色调（红色） -->
<button mat-flat-button class="mat-mdc-button--error">取消</button>

方案2：自定义CSS类直接覆盖变量 #

若不想修改主题调色板，可直接通过CSS变量覆盖按钮样式：

1. 添加自定义样式：

/* 红色取消按钮 */
.btn-cancel {
  --mdc-filled-button-container-color: #dc2626; // M3标准红色
  --mdc-filled-button-label-text-color: #ffffff;
}

/* 绿色确认按钮（若不想用主题primary，可自定义） */
.btn-confirm {
  --mdc-filled-button-container-color: #16a34a; // M3标准绿色
  --mdc-filled-button-label-text-color: #ffffff;
}

2. 应用到按钮：

<button mat-flat-button class="btn-confirm">确认</button>
<button mat-flat-button class="btn-cancel">取消</button>

方案3：创建自定义主题变体（适合复用场景） #

如果需要在多处复用特定颜色的按钮，可创建主题变体：

1. 添加变体样式：

@use '@angular/material' as mat;

// 获取当前主题
$theme: mat.get-theme();

// 注册按钮的error变体（自定义红色）
@include mat.button-theme-variants($theme, (
  error: (
    container-color: mat.get-color-from-palette(mat.$red-palette, 600),
    label-text-color: mat.get-color-from-palette(mat.$red-palette, 50),
  )
));

2. 使用变体类：

<button mat-flat-button>确认</button>
<button mat-flat-button class="mat-mdc-button--error">取消</button>

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