如何修改Angular中mat-menu-item字体大小？求HTML替代方案

一、mat-menu-item字体大小修改无效的解决方法 #

你尝试的SCSS和内联样式无效，核心原因是Angular的**视图封装(View Encapsulation)**机制，Material组件的样式被封装在自身组件内，组件内的样式无法穿透覆盖。以下是几种可行方案：

方案1：使用::ng-deep穿透样式（快速生效，不推荐长期依赖） #

在组件的SCSS中添加：

::ng-deep .mat-menu-item {
  font-size: 9px !important; /* 必要时加!important强制覆盖默认样式 */
}

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

全局样式不受视图封装限制，直接在项目根目录的styles.scss中添加：

.mat-menu-item {
  font-size: 9px;
}

如果只想作用于特定菜单，给mat-menu加自定义类，比如small-menu，再针对性写样式：

.small-menu .mat-menu-item {
  font-size: 9px;
}

对应模板修改：

<mat-menu class="small-menu" #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
</mat-menu>

方案3：关闭组件的视图封装 #

在组件TS文件中设置ViewEncapsulation.None，让组件内的样式全局生效：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { /* 组件逻辑 */ }

之后组件SCSS中正常编写样式即可：

.mat-menu-item {
  font-size: 9px;
}

二、用常规HTML元素重构mat-menu-item组件 #

Material的mat-menu支持自定义内容，你可以用<li>等元素替代默认的<button mat-menu-item>，只需手动处理点击事件和菜单关闭逻辑即可：

示例代码 #

模板部分：

<button [matMenuTriggerFor]="menu" mat-button>Options</button>
<mat-menu #menu="matMenu">
  <mat-menu-content>
    <li class="custom-menu-item" (click)="selectOption('option1')">Option 1</li>
    <li class="custom-menu-item" (click)="selectOption('option2')">Option 2</li>
    <li class="custom-menu-item" (click)="selectOption('option3')">Option 3</li>
  </mat-menu-content>
</mat-menu>

样式部分：

.custom-menu-item {
  padding: 8px 16px;
  font-size: 9px;
  cursor: pointer;
  list-style: none;
  margin: 0;
  &:hover {
    background-color: rgba(0,0,0,0.04); /* 模拟Material默认hover效果 */
  }
}

组件逻辑部分：

import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  // 组件元数据
})
export class YourComponentComponent {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

  selectOption(option: string) {
    console.log('选中选项:', option);
    // 手动关闭菜单
    this.menuTrigger.closeMenu();
  }
}

注意：自定义元素不会自动触发菜单关闭，需要通过MatMenuTrigger的closeMenu()方法手动关闭。

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