如何为mat-expansion-panel-header的::before伪元素设置样式？

我尝试为mat-expansion-panel-header的::before伪元素设置样式，已在全局样式文件styles.scss中添加如下规则：

mat-expansion-panel-header {
  position: relative;
}

mat-expansion-panel-header::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1000;
  background-color: black;
}

预期效果是mat-expansion-panel-header变为黑色，但实际规则未生效，且开发者工具中无法看到该::before伪元素。相关HTML结构如下：

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

问题核心是Angular Material组件的样式隔离机制，以及标签选择器优先级不足。可通过以下两种方式修复：

方式一：使用类选择器提升优先级 #

将标签选择器替换为Angular Material提供的类选择器.mat-expansion-panel-header，确保样式规则能正确匹配目标元素：

.mat-expansion-panel-header {
  position: relative;
}

.mat-expansion-panel-header::before {
  content: '';
  position: absolute;
  inset: 0; /* 替代top/bottom/left/right的简写语法 */
  z-index: 1000;
  background-color: black;
}

方式二：强制穿透样式隔离（组件内样式适用） #

如果是在组件自身的样式文件中设置（而非全局styles.scss），需要使用::ng-deep强制穿透Angular的视图封装，确保伪元素样式生效：

::ng-deep mat-expansion-panel-header {
  position: relative;
}

::ng-deep mat-expansion-panel-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1000;
  background-color: black;
}

补充说明 #

• inset: 0是top:0; right:0; bottom:0; left:0的简写，代码更简洁。
• 若层级仍被覆盖，可适当提高z-index值，一般1000已足够覆盖Material组件内部元素。

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