Frederick Mfinanga Frederick Mfinanga - 8 days ago 5
React JSX Question

Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?



<Stepper linear={false} activeStep={1}>
<Step key={1}>
<StepButton
icon={<LensIcon color={grey300} children={<p>2</p>}/>}
onClick={() => console.log('Clicked')}
/>
</Step>
<Step key={2}>
<StepButton
onClick={() => console.log('Clicked')}
/>
</Step>
</Stepper>





Hey if i add a custom icon i lose the number of the steps, i want to be able to add colors to indicate the status of the steps. but if i introduced my own icons i lose the numbers.
please adviced how to have both? thanks.
enter image description here

Answer

You can put the LensIcon and a step number label inside a div and float the label on top using absolute positioning. Here's a little "StepIcon" component that does the job:

const StepIcon = ({ label, color = colors.grey300, textColor = colors.lightBlack }) => (
    <div style={{ position: 'relative' }}>
      <LensIcon color={color} />
      <div style={{ color: textColor, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', textAlign: 'center', lineHeight: '24px' }}>{label}</div>
    </div>
);

Usage (can use numeric or string labels):

...
<Step key={1}>
  <StepButton
    icon={<StepIcon label={1} />}
    onClick={() => console.log('Clicked') }
    />
</Step>
<Step key={3}>
  <StepButton
    icon={<StepIcon label={'A'} color={colors.green500} textColor={colors.white} />}
    onClick={() => console.log('Clicked') }
  />
</Step>

Here's a jsFiddle of it in action: https://jsfiddle.net/67p1w0mk/2/

Comments