如何对Angular Material Stepper进行CSS样式修改？

嘿，我来帮你搞定这两个Mat-Stepper的样式调整问题！下面是具体的实现方案：

1. 移除步骤间的水平线并替换为箭头元素 #

Angular Material的Mat-Stepper默认水平线由特定CSS类控制，我们可以先隐藏它，再通过伪元素添加自定义箭头分隔符：

实现代码（全局样式或使用::ng-deep） #

/* 隐藏默认的水平连接线 */
::ng-deep .mat-stepper-horizontal-line {
  display: none;
}

/* 为非最后一个步骤添加箭头分隔符 */
::ng-deep .mat-step-header:not(:last-child)::after {
  content: "→"; /* 可替换为其他箭头符号，比如Unicode的"❯"或自定义图标 */
  position: absolute;
  top: 50%;
  right: -28px; /* 根据你的布局调整位置 */
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.54); /* 匹配原连接线的默认颜色 */
}

如果是垂直方向的Mat-Stepper，只需把.mat-stepper-horizontal-line换成.mat-stepper-vertical-line，箭头位置调整为bottom或top方向即可。

2. 为标签添加阴影实现高亮效果 #

你可以针对激活状态的步骤标签或hover状态添加阴影，两种实现方式如下：

盒子阴影高亮（推荐，视觉层次更明显） #

/* 激活状态的标签添加盒子阴影 */
::ng-deep .mat-step-header.mat-step-active .mat-step-label {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding: 5px 10px; /* 增加内边距让阴影效果更自然 */
  border-radius: 4px; /* 可选，让边角圆润 */
}

/* 鼠标hover时的阴影效果 */
::ng-deep .mat-step-header:hover .mat-step-label {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

文字阴影高亮（轻量型效果） #

如果你只想给文字本身加阴影，可以用这个：

::ng-deep .mat-step-header.mat-step-active .mat-step-label {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

注意事项 #

• 若不想使用::ng-deep，可将样式放到项目全局样式文件（如styles.scss）中，也能覆盖Mat-Stepper的默认样式。
• 可调整阴影的模糊度、颜色、偏移量等参数，匹配你的项目设计风格。

希望这些方案能帮到你！

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