如何让::ng-deep仅作用于指定组件的mat-menu-content？

• 给目标组件的mat-menu添加自定义类名
  在组件模板中，为需要修改样式的mat-menu添加一个唯一的自定义类，比如custom-target-menu：

  <mat-menu class="custom-target-menu">
    <!-- 菜单内容 -->
  </mat-menu>
  

• 结合:host与::ng-deep精准定位样式
  在组件的CSS文件中，通过:host限定当前组件范围，再配合自定义类定位目标菜单，避免样式全局扩散：

  :host ::ng-deep .custom-target-menu .mat-menu-content {
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
  }
  

  注意：尽量移除!important，仅在确有高优先级样式冲突时使用，过度依赖会提升样式维护成本。

• 确认ViewEncapsulation配置
  保证组件的ViewEncapsulation未设置为None（该模式会让样式全局生效），默认的Emulated模式是推荐选择：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-your-target-component',
    templateUrl: './your-target-component.component.html',
    styleUrls: ['./your-target-component.component.css'],
    encapsulation: ViewEncapsulation.Emulated // 默认值，可省略
  })
  export class YourTargetComponentComponent { }
  

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