Změna Materiálu UI Stepper ikona pro error krok

0

Otázka

Im pomocí Materiálu uživatelského ROZHRANÍ je Stepper složkou k tomu, aby kontrolní seznam jako tak. To je obrázek z jejich docs.

enter image description here

když jsem chtěl zavést chyba státu, aby kontrolní seznam, zjistil jsem, že tam je prop nazývá chyba pro StepLabel, že můžu prohlásit. V podstatě to vám umožní změnit styly, jako je barva pozadí, atd.

Nicméně, když jsem se nastavit chybové rekvizita je pravda, že tam je nová ikona, která přišla. Nechci tuto ikonu, ale jen chcete změnit barvu výplně z modré na červenou. enter image description here

Existuje nějaký způsob, jak mohu vzdát se, že ikona a jen se starat o barvu výplně krokového místo?

Tady je můj kód:

<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

Nejlepší odpověď

1

Dát podmínku na ikonu rekvizity na StepLabel.

icon={error ? <Error /> : label.step} jako jak zmínil níže

2021-11-24 12:02:06

díky za komentář! Mohu se zeptat, je, že <Error /> tag součástí Materiálu UI? Nebo je to něco jiného?
Kenny Quach

@KennyQuach <Error /> je materiál ui ikona složky. můžete importovat tuto ikonu z @material-ui/icons pro mui v4 a @mui/icons-material pro mui v5.
Amir Achhodi

V jiných jazycích

Tato stránka je v jiných jazycích

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