Estoy usando el componente Stepper de Material UI para generar una lista de verificación como esta. Esta es una foto de sus documentos.
cuando quise introducir un estado de error en la lista de verificación, descubrí que hay un accesorio llamado error para StepLabel que puedo declarar. Básicamente te permitirá cambiar los estilos como el color de fondo, etc.
Sin embargo, cuando configuro la propiedad de error en verdadero, aparece un nuevo ícono. No quiero este ícono, solo quiero cambiar el color de relleno de azul a rojo. 
¿Hay alguna manera de que pueda olvidarme de ese ícono y solo preocuparme por el color de relleno del paso a paso?
Aquí está mi código:
<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}> {formLabels.map((label, index) => { return ( <Step key={label}> <StepLabel icon={label.step} error={true} StepIconProps={{ classes: { root: classes.step, completed: classes.completed, active: classes.active, error: classes.error, disabled: classes.disabled } }}> <span className={classes.sublabel}> {label.sublabel3} </span> </div> </StepLabel> </Step>); })} </Stepper>Poner condición en accesorios de icono en StepLabel.
icon={error ? <Error /> : label.step} como se menciona a continuación 👇
Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}> {formLabels.map((label, index) => { return ( <Step key={label}> <StepLabel icon={error ? <Error /> : label.step} error={true} StepIconProps={{ classes: { root: classes.step, completed: classes.completed, active: classes.active, error: classes.error, disabled: classes.disabled } }}> <div className={classes.stepLabelRoot}> <Typography className={classes.label}> {label.label} </Typography> <span className={classes.sublabel}> {label.sublabel1} </span> <span className={classes.sublabel}> {label.sublabel2} </span> <span className={classes.sublabel}> {label.sublabel3} </span> </div> </StepLabel> </Step>); })} </Stepper>