Angular Material 3：Menu与Select选项主题切换失效问题求助

核心原因 #

Menu和Select的下拉选项属于动态创建的overlay容器，这类容器默认会继承应用初始化时的主题样式，主题切换时不会自动触发样式更新。

具体解决步骤 #

1. 针对Overlay容器补充主题样式 #

在你的extractComponentTheme混入中，专门对mat-overlay-container下的Menu/Select相关元素注入主题样式，确保动态生成的选项能获取到新主题的样式：

@mixin extractComponentTheme($theme) {
  // 原有组件主题混入
  @include mat.menu-theme($theme);
  @include mat.select-theme($theme);
  
  // 新增：覆盖Overlay容器内的Menu/Select选项样式
  .mat-overlay-container {
    // 应用Menu相关主题
    @include mat.menu-color($theme);
    @include mat.menu-typography($theme);
    // 应用Select面板相关主题
    @include mat.select-panel-color($theme);
    @include mat.select-panel-typography($theme);

    // 针对细分元素单独强化样式
    .mat-mdc-menu-item {
      @include mat.menu-item-color($theme);
      @include mat.menu-item-typography($theme);
    }
    .mat-mdc-select-option {
      @include mat.select-option-color($theme);
      @include mat.select-option-typography($theme);
    }
  }
}

2. 强制刷新Overlay容器 #

主题切换时，手动更新Overlay容器的主题类（如果用类切换主题的方式），触发样式重绘：

import { OverlayContainer } from '@angular/cdk/overlay';

constructor(private overlayContainer: OverlayContainer) {}

switchActiveTheme(newTheme: string) {
  // 移除旧主题类，添加新主题类
  const overlayContainer = this.overlayContainer.getContainerElement();
  overlayContainer.classList.forEach(cls => {
    if (cls.includes('-theme')) overlayContainer.classList.remove(cls);
  });
  overlayContainer.classList.add(`${newTheme}-theme`);

  // 若使用CSS变量主题，可触发一次变更检测确保样式同步
}

3. 检查主题作用域 #

确保你的主题变量（不管是SCSS变量还是CSS自定义属性）是全局作用域，或者能穿透到mat-overlay-container内部。避免局部作用域的样式限制了主题变量的传递。

4. 清除固化的初始化样式 #

排查是否在初始化时给Menu/Select的选项设置了固定的颜色、字体样式，这类硬编码样式会覆盖主题混入的样式，需要全部移除，统一通过主题系统控制。

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