Angular 17与Angular Material 17.3.1菜单高度样式失效问题

问题根源 #

1. Angular Material 17的Menu面板是动态挂载到<body>元素下的，不属于组件自身的DOM树，组件内的SCSS受Angular样式隔离机制限制，无法匹配到该面板元素。
2. 原选择器层级错误：<mat-menu>标签仅作为菜单触发器的关联标记，实际菜单面板是.mat-mdc-menu-panel，嵌套在mat-menu下的选择器无法命中目标元素。

可行解决方案 #

方案一：使用::ng-deep穿透样式隔离 #

这是修改Material组件样式最常用的方式，能突破组件样式隔离限制：

方式1：全局修改所有菜单

修改account.component.scss：

::ng-deep .mat-mdc-menu-content .mat-mdc-menu-item {
  min-height: 24px !important;
  // 可选：调整上下内边距，让高度更贴合视觉效果
  padding-top: 4px;
  padding-bottom: 4px;
}

方式2：精准修改指定菜单（推荐）

先在HTML中给目标菜单添加自定义面板类：

<mat-menu #accountMenu="matMenu" panelClass="custom-account-menu">
  <button mat-menu-item routerLink="/register" type="button" class="menu-btn">
    Login
  </button>
</mat-menu>

再在account.component.scss中编写样式：

::ng-deep .custom-account-menu .mat-mdc-menu-item {
  min-height: 24px;
  padding-block: 4px;
}

方案二：全局样式文件中定义样式 #

在项目根目录的styles.scss（全局样式文件）中添加样式，无需穿透：

.custom-account-menu .mat-mdc-menu-item {
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}

同样需要给目标菜单添加panelClass="custom-account-menu"，避免影响其他菜单组件。

方案三：关闭组件样式隔离（不推荐） #

在组件类中关闭ViewEncapsulation，组件内样式会变成全局样式，容易引发样式冲突：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AccountComponent {}

之后即可在组件SCSS中直接编写：

.custom-account-menu .mat-mdc-menu-item {
  min-height: 24px;
}

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