如何减少/最小化角度材料水平步进器中的步骤之间的距离？

Question

我正在使用Angular Material 8 Horizo​​ntal stepper 。

现在我想设置步进器的样式，但我的问题是我不知道如何更改步骤之间的距离。

我尝试使用 CSS：

::ng-deep .mat-horizontal-stepper-header-container {
  max-width: 5px;
  width: 5px;
}

但我不能让步骤图标之间的距离非常小......知道吗？

Answer 1

我刚刚遇到了同样的问题，并通过添加以下 css 解决了它：

::ng-deep.mat-step-header {
  padding: 5px;
}

我使用了一个垂直步进器，发现默认情况下步进器标题在两个方向上都被 24px 填充包围。 添加上述 css 会更改填充。

更新：刚刚意识到您明确要求水平步进器，问题不仅在于填充，还在于行长。 可以通过以下css控制行长：

::ng-deep.mat-stepper-horizontal-line {
  min-width: 5px !important;
}