Angular Material Stepper：设置活动页眉的样式答案

【问题标题】：Angular Material Stepper: Styling the Active HeaderAngular Material Stepper：设置活动页眉的样式
【发布时间】：2020-07-10 04:22:55
【问题描述】：

我正在使用 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，但它不起作用。

【问题讨论】：

标签： html css angular-material material-design

【解决方案1】：

mat-step-header 的角色属性值为“tab”

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

具有标签角色的元素还包含众所周知的 aria 属性，这些属性保存标签的状态。还有一个 aria-selected 属性指示是否选择了 mat-step-header。

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

现在我们知道了 aria 属性，我们可以去设置选定的 step-headers 样式：

::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"

【讨论】：

我在 step-header 中添加了 [aria-selected="true"] 但现在 UI 中出现了一个小问题。选定的台阶变大（宽度增加），其他台阶变小。在添加之前，它们都具有相等的宽度。有没有办法来解决这个问题。谢谢
你能添加一个 stackblitz 的例子，这样我就可以和你一起调查并提供帮助
可能是因为 width: 100% 或者字体粗细会影响渲染大小
你是对的。我已经删除了 width: 100% 并且工作正常。谢谢
我正在尝试使用此 css 将所选标签的颜色也更改为白色： ::ng-deep .mat-step-header .mat-step-label-active { color: white;但它不工作。你有什么想法吗？