Angular Material Stepper: стилизация активного заголовка

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 имеет атрибут role со значением "tab"

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

Элемент с вкладкой role также содержит известные атрибуты aria, в которых хранится состояние вкладки. Существует также атрибут aria-selected, который указывает, выбран ли заголовок mat-step или нет.

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

Теперь, когда мы знаем, что есть атрибут aria, мы можем go и стиль выбранного шага. -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;
  }
}

Дополнительные ресурсы об арии и роли = "tab"