Angular Material从v16升级到v18后多主题使用异常问题

核心问题原因 #

Select、Datepicker等组件的弹出面板（基于CDK Overlay）渲染在页面根节点的.cdk-overlay-container内，不在你的主题类（如.blue-theme）包裹的DOM树中，因此主题类内的样式无法作用到这些面板。如果把主题样式移到全局，又会导致所有面板共用最后加载的主题。

解决方案 #

1. 修改主题SCSS文件，为Overlay添加主题关联样式 #

每个主题文件（如blue-theme.scss）需要同时定义页面内组件的主题和Overlay面板的主题，确保主题样式能覆盖到Overlay容器内的内容：

@use '@angular/material' as mat;

// 定义主题变量
$blue-theme: mat.m2-define-light-theme((
  color: (
    primary: mat.m2-define-palette(mat.$m2-blue-palette, 500),
    accent: mat.m2-define-palette(mat.$m2-blue-palette, A200, A100, A400),
    warn: mat.m2-define-palette(mat.$m2-red-palette)
  ),
  density: 0
));

// 页面内组件的主题（作用于主题类包裹的DOM）
.blue-theme {
  @include mat.core-theme($blue-theme);
  @include mat.all-component-themes($blue-theme);

  // 自定义颜色变量与样式
  $color-bg-dark: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 500);
  $color-bg-middle: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 200);
  $color-bg-bright: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 50);
  $color-fg-dark: #FFFFFF;
  $color-fg-middle: #FFFFFF;
  $color-fg-bright: #444444;
  $color-error: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500);
  $color-statusbar: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700);

  @import './color-styles';
}

// Overlay面板的主题（作用于Overlay容器内的主题类DOM）
.cdk-overlay-container .blue-theme {
  @include mat.core-theme($blue-theme);
  @include mat.all-component-themes($blue-theme);
}

同理，复制这个结构到red-theme.scss、yellow-theme.scss，替换对应的主题变量和类名即可。

2. 配置Overlay自动继承触发组件的主题类 #

通过MAT_OVERLAY_DEFAULT_OPTIONS配置，让Overlay面板在创建时自动添加触发它的组件所在的主题类，这样Overlay容器内的面板就能匹配到第一步定义的样式：

在你的根模块（如AppModule）中添加以下提供者：

import { NgModule } from '@angular/core';
import { MAT_OVERLAY_DEFAULT_OPTIONS } from '@angular/material/core';
import { OverlayRef } from '@angular/cdk/overlay';

@NgModule({
  providers: [
    {
      provide: MAT_OVERLAY_DEFAULT_OPTIONS,
      useValue: {
        panelClass: (overlayRef: OverlayRef) => {
          const triggerElement = overlayRef.triggerElement;
          // 提取触发元素上的主题类（匹配*-theme格式）
          return triggerElement 
            ? Array.from(triggerElement.classList).filter(cls => cls.endsWith('-theme'))
            : [];
        }
      }
    }
  ]
})
export class AppModule { }

3. 保持页面结构不变 #

继续使用原有方式，用主题类包裹页面组件：

<div class="blue-theme">
  <!-- 所有Angular组件 -->
</div>

工作原理 #

• 第一步为Overlay容器内的主题类节点单独定义了主题样式，确保Overlay面板能获取到对应主题的样式规则。
• 第二步通过Overlay配置，让弹出面板自动继承触发组件的主题类，使得Overlay内容能匹配到第一步定义的样式。
• 这样既保证了页面内组件使用选中主题，也让弹出面板自动应用对应主题的样式，不会出现样式丢失或主题混乱的问题。

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