角材料步进器：设置活动标题

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）水果-它带有蓝色背景的圆形边框），并且仅在所选步骤上。

我只对我可以用来定位所选标头的类名感兴趣。我尝试了.mat-step-header-selected，但没有用。

Answer 1

mat-step-header具有role属性，其值为“ tab”

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

带有角色选项卡的元素还包含众所周知的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"