如何在Angular Material Stepper中将标签文本放置在图标下方？

API 探路者

2026-9-3

Angular Material 横向Stepper将步骤标签置于图标下方实现方案

官方默认未提供对应配置项切换标签位置，默认标签位于步骤图标右侧，自行编写样式不生效通常是Angular视图封装机制导致样式无法穿透到第三方组件内部，按以下步骤实现即可：

具体实现

样式穿透处理：两种方案二选一即可
- 方案1：在对应业务组件的装饰器中配置encapsulation: ViewEncapsulation.None关闭该组件的视图封装，让自定义样式可以作用到Material组件内部节点
- 方案2：保留默认视图封装，编写样式时使用::ng-deep选择器穿透作用域
覆盖Stepper头部默认布局样式，将默认横向flex布局改为纵向布局，调整间距和连接线位置即可

代码示例

组件TS配置（选方案1关闭视图封装才需要加）：

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

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
  styleUrls: ['./stepper-demo.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class StepperDemoComponent {}

样式代码（选方案2保留视图封装的话，把所有选择器包裹在:host ::ng-deep内即可）：

.mat-horizontal-stepper-header-container {
  .mat-step-header {
    // 修改头部布局为纵向排列
    flex-direction: column;
    height: auto;
    padding: 8px 0;

    .mat-step-icon {
      // 增加图标和下方标签的间距
      margin-bottom: 8px;
    }

    .mat-step-label {
      // 清除默认标签在图标右侧时的左边距
      margin-left: 0 !important;
      text-align: center;
    }
  }

  .mat-stepper-horizontal-line {
    // 调整步骤间连接线的垂直位置，对齐图标中线，可根据实际图标尺寸微调数值
    top: 24px !important;
  }
}