CODEWITHSUNDEEP
reactjsmaterial-ui
amulous
amulous

Reputation: 732

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?

Upvotes: 0

Views: 746

Answers (1)

lawls544
lawls544

Reputation: 711

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-

Upvotes: 1

Related Questions