Zmień ikonę krokowego interfejsu materiału do kroku błędy

0

Pytanie

Używam krokowy składnik Material UI do wyświetlania listy kontrolnej takiego. To zdjęcie z ich dokumentów.

enter image description here

gdy chciałem wprowadzić stan błędu w liście kontrolnej, okazało się, że dla turowa etykiety jest gumowa pod nazwą błąd, który mogę zadeklarować. W zasadzie to pozwoli ci zmieniać style, takie jak kolor tła itp.

Jednak, gdy zainstalowałem dla parametru błąd wartość true, pojawił się nowy symbol. Nie potrzebuję tę ikonę, ja po prostu chcę zmienić kolor z niebieskiego na czerwony. enter image description here

Czy istnieje jakiś sposób zrezygnować z tej ikony i zamiast tego po prostu się martwić o kolor wypełnienia przyrządu?

Oto mój kod:

<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

Najlepsza odpowiedź

1

Postaw warunek rekwizytów ikony na krokowej etykiecie.

icon={error ? <Error /> : label.step} jak podano poniżej

2021-11-24 12:02:06

dzięki za komentarz! Mogę zapytać, czy ten znacznik <Error /> częścią interfejsu Material? Czy to coś innego?
Kenny Quach

@KennyQuach <Error /> jest składnikiem ikony interfejsu użytkownika materiału. możesz zaimportować ten ikonę z @material-ui/icons dla mui v4 i @mui/icons-material dla mui v5.
Amir Achhodi

W innych językach

Ta strona jest w innych językach

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