Angular中mat-menu样式被覆盖求助：自定义样式不生效

你遇到的核心问题是Angular的视图封装机制：mat-menu会被渲染到根层级的overlay容器中，不在当前组件的DOM树范围内，所以组件内的SCSS样式、甚至内联样式都无法穿透到它，哪怕在浏览器调试工具中直接修改样式能生效。

以下是几种可行的解决方案：

1. 使用::ng-deep穿透视图封装 #

在组件的SCSS文件中添加::ng-deep前缀，让样式突破组件封装作用到外部元素：

::ng-deep mat-menu {
  display: flex;
  flex-direction: column;
}

如果只想作用于特定菜单，可给mat-menu加ID针对性设置：

::ng-deep #menuSide {
  display: flex;
  flex-direction: column;
}

2. 关闭组件的视图封装 #

在组件元数据中关闭视图封装，让组件样式全局生效（注意：会导致组件样式污染全局，需谨慎使用）：

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：

mat-menu {
  display: flex;
  flex-direction: column;
}

3. 将样式放到全局样式文件 #

把样式添加到项目根目录的styles.scss（或styles.css）中，全局样式不受视图封装限制：

mat-menu {
  display: flex;
  flex-direction: column;
}

若只想影响特定菜单，给mat-menu添加class：

<mat-menu #menuSide="matMenu" class="vertical-menu">
  <button mat-button>Materiales</button>
  <button mat-button>Centros</button>
  <button mat-button>Canjeos</button>
</mat-menu>

全局样式中针对class设置：

.vertical-menu {
  display: flex;
  flex-direction: column;
}

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