html - Angular Material 步进器 : Styling the Active Header

Question

我正在使用 Angular Material Stepper 并希望设置所选标题的样式，使其具有蓝色背景的圆形边框。我现在使用的 css 是:

::ng-deep .mat-step-header  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;
  color: #FFFFFF;
}

css 没问题，但它适用于所有步骤，但我只希望它适用于选定的标题。有一个类似 .mat-step-icon-selected 的类以选定的图标为目标，但没有等效的目标为选定的标题。

我希望所选步骤如下图所示((2) Fruits - 它具有蓝色背景的圆形边框)并且它仅在所选步骤上。



我只对我可以用来定位所选标题的类名感兴趣。我试过 .mat-step-header-selected但它不起作用。

Answer 1

mat-step-header 具有值为“tab”的 Angular 色属性

<mat-step-header role="tab">

具有 Angular 色选项卡的元素还包含已知的 aria 属性，这些属性保存选项卡的状态。还有一个 aria-selected 属性，指示是否选择了 mat-step-header。

<mat-step-header role="tab" aria-selected="true">

现在我们知道了 aria 属性，我们可以去设置所选步骤标题的样式:

::ng-deep .mat-step-header[aria-selected="true"]  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;

  & div.mat-step-label.mat-step-label-active.mat-step-label-selected {
      color: #FFF;
  }
}

Additional ressources about aria and role="tab"