Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

342
Vistas
Cambiar el icono de paso a paso de la interfaz de usuario del material para el paso de error

Estoy usando el componente Stepper de Material UI para generar una lista de verificación como esta. Esta es una foto de sus documentos.

ingrese la descripción de la imagen aquí

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. ingrese la descripción de la imagen aquí

¿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>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda