我不会创建这样的风格:
我尝试为已编辑步骤下的所有行设置样式,但有一些行位于 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;
}
}
这是结果:
那么,我怎样才能做到呢?
最佳答案
标题中的行头和行尾。您可以将此类与反射状态一起使用。
.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;
}
关于angular - 如何使用 labelPosition ="bottom"更改 Material 步进线样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56527550/