0
170
VistasEl estado de error del componente paso a paso de la interfaz de usuario del material muestra un icono no deseado
Estoy usando el componente Stepper de Material UI e intento obtener el relleno de un stepper que está en su estado de error para que sea rojo.
Como referencia, aquí está el componente Stepper en los documentos de Material UI.
Así que estoy tratando de mostrar un estado de error. La interfaz de usuario de Material tiene un accesorio de error que mostrará el estado de error; sin embargo, no quiero que se proporcione el ícono.
Solo quiero que sea como cualquier otro paso a paso, solo con un fondo rojo.
¿Hay alguna forma de deshacerme de ese ícono y mostrar solo un relleno rojo?
He estado buscando por todas partes, pero parece que nadie realmente preguntó sobre esto.
Aquí está mi código:
<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}> {formLabels.map((label) => { return ( <Step key={label}> <StepLabel error 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>1 Respuestas
Responde la pregunta0
Los documentos de StepLabel muestran que puede tomar un accesorio de icon opcional, que es un nodo que anula el icono de paso.
Como ejemplo, si quisiera ocultar el icono por completo, podría pasar un elemento Fragmento como icono:
<StepLabel error icon={<></>} > ... </StepLabel> O puede cambiar StepIconComponent o StepIconProps .
Aquí hay un ejemplo que apaga el estado de error solo en el icono:
<StepLabel error StepIconProps={ {error: false} } > ... </StepLabel>