Material de cambio de interfaz de usuario paso a Paso icono de error de paso

0

Pregunta

Estoy usando el Material de la interfaz de usuario paso a Paso componente para representar una lista de verificación como así. Esta es una foto de sus documentos.

enter image description here

cuando yo quería introducir un estado de error de la lista, he encontrado que existe un accesorio llamado error para el StepLabel que puedo declarar. Básicamente se le permitirá cambiar los estilos tales como el color de fondo, etc.

Sin embargo, cuando me puse el error de la proposición a la verdad, hay un nuevo icono que se produjo. No quiero que este icono, pero sólo quiero cambiar el color de relleno de azul a rojo. enter image description here

Es allí cualquier manera de la que puedo prescindir de ese icono y solo se preocupan por el color de relleno del paso a paso en su lugar?

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>
css font-awesome javascript material-ui
2021-11-24 02:06:05
1

Mejor respuesta

1

Poner en la condición de icono de accesorios en StepLabel.

icon={error ? <Error /> : label.step} como menciono a continuación

2021-11-24 12:02:06

gracias por el comentario! Puede que le pido es que <Error /> la etiqueta de una parte del Material de la interfaz de usuario? O es algo más?
Kenny Quach

@KennyQuach <Error /> es el material de interfaz de usuario icono del componente. usted puede importar este icono de @material-ui/icons para mui v4 y @mui/icons-material para mui v5.
Amir Achhodi

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................