升级至Angular Material 18后按钮文字与背景色重合问题咨询

升级到Angular及Angular Material 18.0.0后，按钮文字颜色和背景色完全一致，导致文字无法辨认，这个问题在17.0.0版本中不存在。当前使用的主题配置代码如下：

@use '@angular/material' as mat;
@include mat.core();

@import './color.scss';

// @include mat.all-component-themes(get-light-theme($blue-theme));

$kids-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: mat.m2-define-palette($cyan-theme),
      accent: mat.m2-define-palette($yellow-theme),
    ),
  )
);

@include mat.all-component-themes($kids-theme);

问题原因 #

Angular Material 18对M2兼容主题的按钮颜色计算逻辑做了调整，当自定义调色板的对比度参数未明确配置，或者对比度不符合默认阈值时，会出现文字颜色与背景色重合的情况。

解决方案 #

1. 修正自定义调色板的对比度配置

在color.scss中定义调色板时，明确指定每个色调对应的对比文字颜色，确保背景与文字有足够对比度：

// 示例：针对cyan调色板配置对比度
$cyan-theme: mat.m2-define-palette(mat.$cyan-palette, 500, 100, 900, (
  contrast: (
    500: white, // 主色调背景用白色文字
    100: black, // 浅色调背景用黑色文字
    900: white, // 深色调背景用白色文字
  )
));

// yellow调色板同理
$yellow-theme: mat.m2-define-palette(mat.$yellow-palette, 500, 100, 900, (
  contrast: (
    500: black,
    100: black,
    900: white,
  )
));

2. 手动覆盖按钮文字颜色

如果不想修改调色板，可以直接通过CSS覆盖按钮的文字颜色：

// 针对主按钮
.mat-mdc-button.mat-primary {
  --mdc-button-label-text-color: white; // 根据你的背景色选择合适的对比色
}

// 针对强调按钮
.mat-mdc-button.mat-accent {
  --mdc-button-label-text-color: black;
}

3. 切换到Material Design 3主题（推荐长期方案）

Angular Material 18对M3主题的支持更完善，颜色系统会自动处理对比度问题。只需将主题定义中的m2-前缀去掉，切换到M3主题：

$kids-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette($cyan-theme),
      accent: mat.define-palette($yellow-theme),
    ),
  )
);

应用以上任意一种方案后，按钮文字颜色都会与背景色形成清晰对比，恢复正常可读性。

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