Estoy tratando de hacer que el componente paso a paso de MUI represente algunos íconos dentro de cada nodo de paso. Sin embargo, cuando trato de hacer esto, solo aparece una pantalla en blanco sin ningún contenido. Quiero obtener este aspecto (como se muestra en los documentos).

Como puede ver, el aspecto deseado es con íconos dentro, cuyo MUI proporciona el código de muestra a continuación. Pero cuando trato de implementarlo, aparece una pantalla en blanco.

 const ColorlibStepIconRoot = 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 ColorlibStepIcon(props) { const { active, completed, className } = props; const icons = { 1: <Icon>star</Icon>, 2: <Icon>star</Icon>, 3: <Icon>star</Icon>, }; return ( <ColorlibStepIconRoot ownerState={{ completed, active }} className={className}> {icons[String(props.icon)]} </ColorlibStepIconRoot> ); } <Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}> {steps.map(label => ( <Step key={label}> <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel> </Step> ))} </Stepper>