Angular 15 Material无法修改mat-menu默认最小高度问题求助

你遇到的问题核心是Angular的组件样式隔离导致自定义样式无法穿透到Material组件内部的mat-menu-panel元素，而且你之前修改的mat-menu和mat-menu-item并不是控制面板高度的目标元素，真正负责面板容器的是.mat-menu-panel类。

下面是几种可行的解决方式：

• 使用::ng-deep穿透样式（项目中最常用的快速解决方式）
  在组件的样式文件中添加：

  ::ng-deep .mat-menu-panel {
    min-height: 50px !important;
  }
  

  ::ng-deep会打破组件的样式隔离，让样式作用到嵌套的Material组件内部；!important用于覆盖Material默认样式的优先级。

• 关闭组件样式封装（需注意样式污染）
  在组件的TS文件中修改装饰器配置：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponentComponent {}
  

  然后在组件样式文件中直接写：

  .mat-menu-panel {
    min-height: 50px;
  }
  

  为了避免样式影响其他组件的mat-menu，建议给目标菜单加自定义类：

  <mat-menu class="custom-menu">
    <!-- 菜单项 -->
  </mat-menu>
  

  样式改为：

  .custom-menu .mat-menu-panel {
    min-height: 50px;
  }
  

• 在全局样式文件中定义样式
  在项目根目录的styles.css（或styles.scss）中添加样式：

  .custom-min-height-menu .mat-menu-panel {
    min-height: 50px;
  }
  

  然后给目标mat-menu添加对应类名：

  <mat-menu class="custom-min-height-menu">
    <!-- 菜单项 -->
  </mat-menu>
  

  这种方式不会受组件样式隔离影响，同时通过自定义类避免全局污染。

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