I'm having trouble getting the MUI Stepper Component to display Icons within each step node. Despite following the sample code provided by MUI, my implementation only shows a blank screen instead of the desired look.
The desired appearance includes icons inside each step, as illustrated in the documentation snapshot below:
https://i.sstatic.net/zvMxh.png
const CustomStepIconRoot = styled('div')(({ theme, ownerState }) => ({
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
...(ownerState.active && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
}),
...(ownerState.completed && {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
}),
}));
function CustomStepIcon(props) {
const { active, completed, className } = props;
const icons = {
1: <Icon>star</Icon>,
2: <Icon>star</Icon>,
3: <Icon>star</Icon>,
};
return (
<CustomStepIconRoot ownerState={{ completed, active }} className={className}>
{icons[String(props.icon)]}
</CustomStepIconRoot>
);
}
<Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
{steps.map(label => (
<Step key={label}>
<StepLabel StepIconComponent={CustomStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>