如何根据Angular Material步进器的方向应用不同CSS样式？

当然可以实现，Angular Material的步进器（MatStepper）会根据设置的direction属性自动添加对应的类名，我们可以直接利用这些内置类编写针对性的样式。

实现步骤 #

1. 模板与组件逻辑

首先在模板中绑定步进器的direction属性，并用一个变量控制切换：

<button mat-button (click)="toggleDirection()">切换步进器方向</button>

<mat-stepper [direction]="currentDirection" linear>
  <mat-step label="第一步">
    <p>第一步的内容区域</p>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
  <mat-step label="第二步">
    <p>第二步的内容区域</p>
    <button mat-button matStepperPrevious>上一步</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
  <mat-step label="第三步">
    <p>第三步的内容区域</p>
    <button mat-button matStepperPrevious>上一步</button>
  </mat-step>
</mat-stepper>

组件类中定义方向变量和切换方法：

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

@Component({
  selector: 'app-custom-stepper',
  templateUrl: './custom-stepper.component.html',
  styleUrls: ['./custom-stepper.component.css']
})
export class CustomStepperComponent {
  currentDirection: 'horizontal' | 'vertical' = 'horizontal';

  toggleDirection() {
    this.currentDirection = this.currentDirection === 'horizontal' ? 'vertical' : 'horizontal';
  }
}

2. 编写针对性CSS

Angular Material会给水平步进器添加mat-horizontal-stepper类，垂直步进器添加mat-vertical-stepper类。直接基于这些类编写样式：

/* 垂直步进器的内容背景 */
.mat-vertical-stepper .mat-step-content {
  background-color: #ffcccc;
  padding: 1rem;
}

/* 水平步进器的内容背景 */
.mat-horizontal-stepper .mat-step-content {
  background-color: #cce5ff;
  padding: 1rem;
}

/* 可选：调整步进器头部样式 */
.mat-vertical-stepper .mat-step-header {
  background-color: #ff9999;
}

.mat-horizontal-stepper .mat-step-header {
  background-color: #99ccff;
}

原理说明 #

当你设置[direction]="currentDirection"时，MatStepper组件会自动更新自身的类名：

• 当currentDirection为horizontal时，组件元素会带有mat-horizontal-stepper类
• 当currentDirection为vertical时，组件元素会带有mat-vertical-stepper类

利用这些内置类，你可以精准控制不同方向下步进器的各种样式，无需额外手动绑定类名。

如果遇到样式不生效的情况，检查以下两点：

• 确保选择器的优先级足够（比如避免被更通用的样式覆盖）
• 若使用组件的默认视图封装（Emulated），可以尝试将样式放到全局样式文件（styles.css）中，或者使用::ng-deep穿透封装（注意::ng-deep可能在未来版本被移除，建议优先调整选择器优先级）

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