Angular 15自定义主题被MDC组件覆盖的解决方案咨询

问题核心 #

基于MDC实现的Angular Material组件，会优先使用mdc-theme-*系列CSS变量，默认情况下这些变量的优先级高于你自定义的Mat主题配置，导致部分组件文本/背景色无视你的设置。

解决方案：同步Mat主题与MDC变量 #

不需要完全重写MDC主题体系，只需在自定义Mat主题配置完成后，手动提取调色板值覆盖MDC变量，实现两者的色值对齐。

完整配置示例

@use '@angular/material' as mat;
@use 'sass:map';
@use 'core' as core;

// 原有主题配置保留
$primary-palette: mat.define-palette(core.$mx-green-palette);

$light-theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $primary-palette,
    warn: mat.define-palette(mat.$deep-orange-palette),
  ),
  typography: core.$mx-typography,
  density: -1
));

// 重写背景/前景调色板
$light-theme: map.set(
    $light-theme,
    color,
    background,
    core.$mx-light-theme-background-palette
);

$light-theme: map.set(
    $light-theme,
    color,
    foreground,
    core.$mx-light-theme-foreground-palette
);

// 从主题中提取颜色配置
$theme-color-config: map.get($light-theme, color);
$background-palette: map.get($theme-color-config, background);
$foreground-palette: map.get($theme-color-config, foreground);
$primary-palette: map.get($theme-color-config, primary);

// 初始化Mat核心样式
@include mat.core();
@include mat.all-component-themes($light-theme);
@include mat.all-component-typographies($light-theme);

// 全局覆盖MDC主题变量，对齐自定义调色板
:root {
  // 背景类变量
  --mdc-theme-background: #{mat.get-color-from-palette($background-palette, background)};
  --mdc-theme-surface: #{mat.get-color-from-palette($background-palette, surface)};
  // 前景文本类变量
  --mdc-theme-on-background: #{mat.get-color-from-palette($foreground-palette, text)};
  --mdc-theme-on-surface: #{mat.get-color-from-palette($foreground-palette, text)};
  // 主色调变量（按需对齐）
  --mdc-theme-primary: #{mat.get-color-from-palette($primary-palette, 500)};
  --mdc-theme-on-primary: #{mat.get-color-from-palette($primary-palette, contrast-500)};
}

精细调整（针对特定组件） #

如果全局覆盖仍有遗漏，可针对单个组件的MDC变量进行精准覆盖：

// 例如调整Mat卡片的文本颜色
.mat-mdc-card {
  --mdc-theme-on-surface: #{mat.get-color-from-palette($foreground-palette, card-text)};
}

对齐调色板的关键技巧 #

1. 使用mat.get-color-from-palette($palette, $hue)函数，既能提取50-900标准色阶，也能读取你自定义调色板中的自定义键值（如background、card-text）
2. 确保自定义$mx-light-theme-background-palette和$mx-light-theme-foreground-palette的键名，与MDC变量的语义对应（比如surface对应--mdc-theme-surface）

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