Измените значок шагового интерфейса материала для шага ошибки

0

Вопрос

Я использую шаговый компонент Material UI для отображения контрольного списка, подобного этому. Это фотография из их документов.

enter image description here

когда я хотел ввести состояние ошибки в контрольный список, я обнаружил, что для пошаговой метки есть опора под названием ошибка, которую я могу объявить. В основном это позволит вам изменять стили, такие как цвет фона и т.д.

Однако, когда я установил для параметра ошибка значение true, появился новый значок. Мне не нужен этот значок, я просто хочу изменить цвет заливки с синего на красный. enter image description here

Есть ли какой-нибудь способ отказаться от этого значка и вместо этого просто беспокоиться о цвете заливки степпера?

Вот мой код:

<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

Лучший ответ

1

Поставьте условие для реквизита значка на шаговой метке.

icon={error ? <Error /> : label.step} как указано ниже

2021-11-24 12:02:06

спасибо за комментарий! Могу я спросить, является ли этот тег <Error /> частью пользовательского интерфейса Material? Или это что-то другое?
Kenny Quach

@KennyQuach <Error /> является компонентом значка пользовательского интерфейса материала. вы можете импортировать этот значок из @material-ui/icons для mui v4 и @mui/icons-material для mui v5.
Amir Achhodi

На других языках

Эта страница на других языках

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