Angular 15(MDC) tooltip主题背景色不生效问题咨询

嘿，我之前也踩过这个坑，来给你捋清楚背后的原因！

在Angular 14及更早版本里，Material的主题系统允许我们直接在全局的color.background配置里定义tooltip的背景色，再通过@include mat.all-component-colors($theme)应用——这是因为当时tooltip的样式是直接读取全局背景配置里的对应属性。

但从Angular Material 15开始，官方对主题系统做了核心重构，其中一个关键变化是：组件的颜色配置不再依赖全局通用的背景/前景属性，每个组件都有了专属的颜色角色配置。

具体到tooltip来说，它的背景色现在属于tooltip组件自身的background颜色角色，不再是全局color.background下的子属性了。这就导致mat.define-light-theme生成的color.background.tooltip变成了一个遗留属性，Tooltip组件根本不会再读取它，自然也就不会生效。

正确的设置方式 #

现在要自定义tooltip的背景色，你需要针对tooltip组件单独配置主题，这里有两种常见的实现方法：

方法1：单独定义tooltip主题并应用 #

// 先定义基础浅色主题
$light-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
  )
));

// 自定义tooltip的主题配置
$tooltip-custom-theme: mat.define-tooltip-theme((
  color: (
    background: red, // 在这里设置tooltip背景色
  )
));

// 依次加载核心样式、全局组件主题、tooltip自定义主题
@include mat.core();
@include mat.all-component-themes($light-theme);
@include mat.tooltip-theme($tooltip-custom-theme);

方法2：合并到全局主题中 #

如果你想把tooltip的配置整合到全局主题里，可以用mat.merge-themes：

$light-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
  )
));

// 将自定义tooltip配置合并到基础主题
$customized-theme: mat.merge-themes($light-theme, (
  components: (
    tooltip: (
      color: (
        background: red,
      )
    )
  )
));

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

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