Material UI Stepper with alternative label placement

Question

I want to create a material-ui stepper element which looks like this: They call it stepper element with alternative label placement.

I am using material-ui library which implements Google's Material Design. Right now all examples from that library show in-line label placing and I don't see any property which would make it possible to use alternative label placement. But I believe it was implemented at some point of time because there was discussion about it.

Is there a way to set alternative label placement for stepper right now?

Answer 1

According to their docs Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.

Answer 2

you could use mui element customization ways to make your label position change.

check the official documentation here.

Overriding styles through sx properties is the easiest way to change the standard behaviour.

you need to locate the relevant CSS class in the devtools of your browser which was injected by Material UI. Then by using standard styling rules, you can change the appearance as you need.