angular - 如何使用 labelPosition ="bottom"更改 Material 步进线样式

Question

我不会创建这样的风格:

我尝试为已编辑步骤下的所有行设置样式，但有一些行位于 mat-step-headers 之外。

::ng-deep .mat-horizontal-stepper-header {
    &[ng-reflect-state='edit'] + .mat-stepper-horizontal-line {
               border-top-width: 4px;
               border-top-color: blue;
    }
}

这是结果:

那么，我怎样才能做到呢？

Answer 1

标题中的行头和行尾。您可以将此类与反射状态一起使用。

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before { 
  border-top-width: 4px;
  border-top-color: blue;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after, [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {
  border-top-width: 4px;
  border-top-color: blue;
}

.mat-stepper-horizontal-line {
  border-top-width: 4px;
  border-top-color: blue;
}