如何在Angular中将mat-menu-item的字体大小改为小号？

问题代码 #

<button [matMenuTriggerFor]="menu" mat-button>Options</button>
<mat-menu class="mat-menu" #ServicesButton #menu="matMenu">
    <button class="mat-menu-item" mat-menu-item>Option 1</button>
    <button class="mat-menu-item" mat-menu-item>Option 2</button>
    <button class="mat-menu-item" mat-menu-item>Option 3</button>
    <button class="mat-menu-item" mat-menu-item>Option 4</button>
</mat-menu>

问题：当前菜单采用Angular默认CSS样式，自定义CSS类无法修改字体大小，内联样式仅能调整背景色，需将mat-menu-item字体改为小号。

解决方案 #

方法1：用::ng-deep穿透视图封装

在组件的CSS文件中添加以下代码，突破Angular的视图封装限制，直接修改Material组件内部样式：

::ng-deep .mat-menu-item {
    font-size: 12px; /* 替换为你需要的小号字体尺寸 */
}

若只想让当前菜单生效，可搭配自定义父类避免影响全局：

::ng-deep .custom-small-menu .mat-menu-item {
    font-size: 12px;
}

然后给模板中的mat-menu添加对应类：

<mat-menu class="mat-menu custom-small-menu" #ServicesButton #menu="matMenu">
    <!-- 菜单选项 -->
</mat-menu>

方法2：全局样式修改

在项目根目录的styles.css（或styles.scss）中添加样式，全局生效：

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

同样可通过自定义类限定范围：

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

方法3：关闭组件视图封装

在组件装饰器中关闭视图封装，使组件内CSS变为全局样式：

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 {
  // 组件逻辑
}

之后在组件CSS中直接编写样式即可：

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

说明 #

Angular的视图封装会给组件CSS添加唯一属性，导致自定义样式无法穿透到Material组件内部元素。以上方法均可解决该问题：仅需修改当前组件菜单时，优先选带自定义类的::ng-deep；需全局统一修改时，用全局样式更合适。

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