mat-horizontal-stepper激活步骤样式不生效问题求助

问题核心原因 #

你的代码存在两个关键问题：

1. HTML结构错误：手动添加<mat-step-header>属于多余操作，mat-horizontal-stepper会自动为每个<mat-step>生成头部元素，手动插入会打乱组件原有渲染结构。
2. Angular样式隔离限制：组件内的样式默认无法穿透到Material组件的内部DOM节点，导致自定义CSS选择器无法匹配到目标元素。

具体修复步骤 #

1. 修正HTML结构

删除多余的<mat-step-header>标签，正确的组件结构如下：

<mat-horizontal-stepper linear id="stepper" [selectedIndex]="currentIndex" (selectionChange)="onStepChange($event)">
  <ng-template matStepperIcon="done">
  </ng-template>
  <ng-template matStepperIcon="edit">
  </ng-template>
  <!-- 按需求添加对应步骤内容 -->
  <mat-step>
    <!-- 步骤内的内容 -->
  </mat-step>
  <mat-step>
    <!-- 步骤内的内容 -->
  </mat-step>
</mat-horizontal-stepper>

2. 突破样式隔离限制

有两种可行方案让自定义样式生效：

方案一：使用::ng-deep穿透样式

在组件的CSS/SCSS文件中添加：

::ng-deep .mat-step-header[aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

::ng-deep .mat-step-header .mat-step-icon-selected {
  background-color: #6cb73a;
  color: #fff;
}

注：::ng-deep属于过渡性方案，但当前仍能稳定生效，适合快速解决问题。

方案二：关闭组件样式隔离

在组件的TS文件中修改装饰器配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: '你的组件选择器',
  templateUrl: './你的组件模板.html',
  styleUrls: ['./你的组件样式.css'],
  encapsulation: ViewEncapsulation.None
})
export class 你的组件类名 {
  // 组件逻辑代码
}

之后直接在样式文件中写入：

.mat-step-header[aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.mat-step-header .mat-step-icon-selected {
  background-color: #6cb73a;
  color: #fff;
}

注：此方式会让组件样式变为全局样式，需注意避免污染其他组件的样式。

3. 验证效果

修改完成后重新运行项目，激活步骤的背景色和图标颜色即可正常显示。

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