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

[klinki]

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.

[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 }

[joebochill]

I too would like to be able to style my step headers via CSS classes. Currently resorting to ::ng-deep rules which I am not a fan of.

[tinybigideas]

This would be very welcomed. Currently using a CSS workaround to disable a couple optional steps dynamically:

#cdk-step-label-0-1,
#cdk-step-label-0-2 {
  pointer-events: none !important;
  cursor: not-allowed;
  opacity: 0.6;
}

Not ideal.

[cornyluft]

I too would like to be able to style the step headers via CSS classes.

[davideas]

Well, not only the step-headers, but the single step <mat-step> !!!
Currently it changes the element name at runtime, ignoring the id and the added class names, so we can't intercept the single element via CSS.
Give us an option to identify the elements via its ID or our class name.

[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.

[FloNeu]

Related - i just tried to style the 'stepper-lines' and other parts of the mat-step component, depending on the state of the mat-step, like 'error', 'completed', 'editable'. I tried to apply These styles to the -container using [ngclass] which doesn't work - i think it would be immensely useful to allow a way to apply custom classes ( or at least these specific stepper-state classes to the mat-step container ).