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

Question

Использование "@ material-ui / core" в версии 3.1.0

Глобально довольно просто переопределить цвет иконки степпера глобально

createMuiTheme({
   overrides: {
     MuiStepIcon: {
       root: {
         color: "#F00"
       },
     }
   }
})

ОднакоНепонятно, как бы вы переопределили только цвет значка для StepButton или StepLabel, используя рекомендуемые методы .Я вижу, что вы можете передать свой собственный элемент icon, но я не хочу копировать логику библиотеки для номера шага и галочки.

Есть ли чистый способ сделать это?

Answer 1

StepLabel предоставляет свойство StepIconProps, которое позволяет передавать пользовательские реквизиты компоненту StepIcon.( документы )

Вы можете использовать опору classes для настройки стилей StepIcon.

<Step key={label}>
  <StepLabel 
    StepIconProps={{ 
      classes: { root: classes.icon } 
    }}
  >
    {label} 
  </StepLabel>
</Step>

Нелинейные степперы

Вы можете вложить StepLabel компонент внутрь StepButton когда вам нужно передать пользовательские реквизиты StepIcon. ( документы )

<Step key={label}>
  <StepButton
    onClick={this.handleStep(index)}
    completed={this.state.completed[index]}
  >
    <StepLabel
      StepIconProps={{ classes: { root: classes.icon } }}
    >
      {label}
    </StepLabel>
  </StepButton>
</Step>