amulous amulous - 2 months ago 11
React JSX Question

Customizing Stepper : StepLabel

I want to modify the content of the StepLabel circles from the numbers to some custom text.
enter image description here

How do I do it?

Also, I can set the icon for the label but what other styling can be done for the numbered circles?

Answer

The icon prop for the <StepLabel> accepts either a number, a string or a React component. Therefore you can put in custom text into it, or even a custom icon.

However, right now, the wrapper <span> for this icon is fixed with:

iconContainer: {
  display: 'flex',
  alignItems: 'center',
  paddingRight: 8,
  width: 24,
},

So this means that if your text is long, or even if you put in a large-width node, the "label" part will not be appropriately placed. However, you can work around this by adding a margin to the "label" part to offset it.

Here is an example that shows this in action: http://www.webpackbin.com/EkWu2Mr3-

Comments