如何在Angular独立组件中修改<mat-menu>父级CSS且不污染全局样式

问题背景 #

需要修改Angular独立组件中<mat-menu>的样式，之前使用::ng-deep导致样式泄漏到全局，不符合需求。

解决方案一：使用ViewEncapsulation.None + 组件选择器限定样式范围 #

关闭组件的样式封装，但通过组件选择器作为前缀，确保样式仅作用于当前组件内的菜单，不会污染全局。

1. 修改组件类，添加样式封装配置：

import { Component, OnInit, Signal, WritableSignal, computed, signal, ViewEncapsulation } from '@angular/core';
// ... 其他导入

@Component({
  selector: 'app-dashboard-pelacak-kebijakan-filter-tipe-dokumen',
  standalone: true,
  imports: [
    MatMenuModule,
    MatIconModule,
    RouterLink,
    FormatFiltersTipeDokumenToQueryParamsPipe,
    NgClass,
    NgTemplateOutlet,
    NgSwitch,
    NgSwitchCase,
    NgSwitchDefault,
  ],
  templateUrl: './dashboard-pelacak-kebijakan-filter-tipe-dokumen.component.html',
  styleUrl: './dashboard-pelacak-kebijakan-filter-tipe-dokumen.component.scss',
  encapsulation: ViewEncapsulation.None // 添加该配置
})
export class DashboardPelacakKebijakanFilterTipeDokumenComponent implements OnInit {
  // ... 现有组件代码
}

2. 替换SCSS中的::ng-deep代码，用组件选择器限定范围：

// 保留原有的.button样式...

// 替换原有的::ng-deep代码
app-dashboard-pelacak-kebijakan-filter-tipe-dokumen .mat-mdc-menu-panel.dashboardPelacakKebijakanFilterMenu {
    border-radius: 0.75rem;
    border: 1px solid var(--Color-Gray-gray20, #EAECF0);
    background: #FFF;

    .mat-mdc-menu-content {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
}

// 保留原有的dashboardPelacakKebijakanFilterMenu__button相关样式...

解决方案二：使用Mat-Menu的panelClass属性（更推荐） #

Angular Material的mat-menu提供了panelClass输入属性，可直接给菜单面板添加自定义类，无需关闭样式封装或使用全局::ng-deep。

1. 修改模板，给<mat-menu>添加自定义面板类：

<mat-menu #menu="matMenu" 
          class="dashboardPelacakKebijakanFilterMenu"
          [panelClass]="'custom-filter-menu-panel'"
          (click)="$event.stopPropagation()">
    <!-- 现有菜单内容 -->
</mat-menu>

2. 修改SCSS样式，用:host ::ng-deep限定样式作用范围：

// 保留原有的.button和dashboardPelacakKebijakanFilterMenu__button样式...

:host ::ng-deep .custom-filter-menu-panel {
    border-radius: 0.75rem;
    border: 1px solid var(--Color-Gray-gray20, #EAECF0);
    background: #FFF;

    .mat-mdc-menu-content {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
}

说明 #

• 方案二无需修改组件的样式封装策略，:host确保样式仅作用于当前组件内部的菜单，彻底避免全局泄漏问题。
• 两种方案都能替代原来的::ng-deep全局样式写法，可根据项目习惯选择。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan