Angular Material组件内部元素CSS不生效问题排查

核心原因：Angular视图封装 + 组件DOM隔离 #

你的问题大概率是Angular默认的视图封装机制结合ion-menu可能的Shadow DOM隔离导致的：

• Angular默认启用ViewEncapsulation.Emulated，会给当前组件的样式自动添加唯一属性选择器（比如[_nghost-xxx]），而mat-expansion-panel-content是MatExpansionPanel组件内部生成的DOM元素，属于该组件的封装域，你的选择器ion-menu mat-expansion-panel .mat-expansion-panel-content会被加上当前组件的属性前缀，无法匹配到目标元素。
• 外层选择器ion-menu mat-expansion-panel能生效，是因为mat-expansion-panel是当前组件模板直接引用的元素，属于当前封装域，样式可以正常匹配。
• 若你用的是Ionic的ion-menu，它本身可能使用了原生Shadow DOM，内部的样式隔离会进一步阻止外部样式穿透。

可行解决方法 #

1. 使用::ng-deep穿透封装
   在样式前添加::ng-deep，强制突破Angular的视图封装限制：

   ::ng-deep ion-menu mat-expansion-panel .mat-expansion-panel-content {
     /* 你的样式代码，比如清除间距 */
     padding: 0;
     margin: 0;
   }
   

   若不想污染全局样式，可配合:host()限定当前组件范围：

   :host ::ng-deep ion-menu mat-expansion-panel .mat-expansion-panel-content {
     /* 你的样式代码 */
   }
   

2. 关闭当前组件的视图封装
   在组件装饰器中设置encapsulation: ViewEncapsulation.None，让组件样式变为全局样式，直接作用到内部组件：

   import { Component, ViewEncapsulation } from '@angular/core';
   
   @Component({
     selector: 'your-component',
     templateUrl: './your-component.component.html',
     styleUrls: ['./your-component.component.css'],
     encapsulation: ViewEncapsulation.None
   })
   export class YourComponentComponent { }
   

   注意：此方法会让样式全局生效，需注意避免样式冲突。

3. 使用Angular Material内置CSS变量
   部分Angular Material组件提供了可直接修改的CSS自定义变量，比如针对MatExpansionPanel的内容间距，可直接在当前组件样式中设置：

   ion-menu mat-expansion-panel {
     --mat-expansion-panel-content-padding: 0;
     /* 其他对应自定义变量 */
   }
   

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