mat-stepper: Allow custom CSS classes for mat-step-header

Please describe the feature you would like to request.

Please add API to add custom css classes to mat-step-header.

What is the use-case or motivation for this proposal?

We want to set custom cursor for disabled steps in linear stepper.

Is there anything else we should know?

Disabled steps have the same hover and click animations, it would be nice to be able to customize them. But I guess there is other issue for that. And custom css classes would also help with this.

[andreElrico]

I found a way how to disable a step. The material team should add a disable option on <mat-step ...>

here is a working STACKBLITZ

I (miss)use the aria-labelledby input.

...
<mat-step [stepControl]="secondFormGroup" [aria-labelledby]="stepDisabled ? 'disabled_af' : null">
...

in css:

::ng-deep .mat-step-header[aria-labelledby="disabled_af"] {
  pointer-events: none !important;
  cursor: not-allowed;
  opacity: 0.6;
  background-color: pink /* remove when in prod. Its just there to prove the concept*/
}

• please use some other aria label as I have here.
• of course you have to manage the disable-state of the stepper buttons with the known techniques.

[hriverahdez]

Yes please add this feature. I would like to apply styles to the active step’s header via a class. I’ve done it like this, but it’s kind of a hack

.mat-step-header[aria-selected="true"] { background-color: rgba(0, 0, 0, 0.04) !important }