Angular v15中mat-menu自定义主题实现方法求助

在Angular v15中，mat-menu基于MDC（Material Design Components）重构，且渲染在overlay容器中，旧版本的定制方法不再适用。以下是可行的实现步骤：

1. 基础主题配置 #

首先在自定义主题文件（如src/styles/custom-theme.scss）中完成Material主题的基础定义：

@use '@angular/material' as mat;

// 定义主题色板
$custom-primary: mat.define-palette(mat.$indigo-palette);
$custom-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$custom-warn: mat.define-palette(mat.$red-palette);

// 生成浅色主题（如需深色可替换为mat.define-dark-theme）
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));

// 全局应用Material组件主题
@include mat.core();
@include mat.all-component-themes($custom-theme);

2. 定制mat-menu专属样式 #

由于mat-menu的DOM元素挂载在overlay容器中，需针对v15新增的mat-mdc-menu-panel类及其内部元素定制：

// 定制菜单面板基础样式
.mat-mdc-menu-panel {
  background-color: mat.get-color-from-palette($custom-primary, 50);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
}

// 定制菜单项样式
.mat-mdc-menu-item {
  color: mat.get-color-from-palette($custom-primary, 700);
  padding: 8px 16px;

  // 鼠标悬停状态
  &:hover {
    background-color: mat.get-color-from-palette($custom-primary, 100);
  }

  // 激活状态（如当前选中项）
  &.mdc-list-item--activated {
    background-color: mat.get-color-from-palette($custom-primary, 200);
    color: mat.get-color-from-palette($custom-primary, 900);
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .mat-mdc-menu-panel {
    background-color: mat.get-color-from-palette($custom-primary, 900);
  }

  .mat-mdc-menu-item {
    color: mat.get-color-from-palette($custom-primary, 100);

    &:hover {
      background-color: mat.get-color-from-palette($custom-primary, 800);
    }

    &.mdc-list-item--activated {
      background-color: mat.get-color-from-palette($custom-primary, 700);
      color: mat.get-color-from-palette($custom-primary, 50);
    }
  }
}

3. 确保主题文件生效 #

在angular.json的styles数组中添加自定义主题文件路径，确保全局加载：

"styles": [
  "src/styles/custom-theme.scss",
  "src/styles.scss"
]

关键注意事项 #

• v15中mat-menu的类名已更新为mat-mdc-menu-panel，旧版mat-menu-panel不再生效，这是多数旧方案失效的核心原因；
• 使用mat.get-color-from-palette函数从主题色板中取色，可保持整体主题风格一致性；
• 若需针对特定菜单定制，可给目标mat-menu添加自定义类名，再通过嵌套选择器精准匹配。

内容的提问来源于stack exchange，提问作者vitaly-t