Angular Material 3按钮未显示Azure(#005cbb)颜色的问题排查

代码片段 #

HTML代码 #

<button mat-button class="basic">Basic</button>

SCSS代码 #

.basic {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

问题现象 #

按上述配置主题后，按钮仍显示黑字白底，未达到预期的Azure文本效果。

实际显示效果：

示例预期显示效果：

代码复制自某StackBlitz示例。

开发者工具观察到的样式 #

Chrome开发者工具中可见默认样式优先级覆盖了主题配置：

.mat-mdc-button:not(:disabled) {
    color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));
}

解决方法 #

要消除--mdc-text-button-label-text-color变量导致的黑字问题，可采用以下两种方式：

1. 重置变量值 #

在.basic类中直接重置该变量，让它继承主题的primary颜色：

.basic {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
  --mdc-text-button-label-text-color: var(--mat-sys-primary);
}

2. 强制指定文本颜色 #

如果变量重置无效，直接给按钮设置颜色（优先级更高）：

.basic {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
  color: mat.get-color-from-palette(mat.$azure-palette) !important;
}

额外检查点：确认Angular Material版本与示例一致，避免版本差异导致主题兼容问题；同时确保没有全局样式或其他高优先级规则覆盖当前配置。

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