Переопределение стилей CSS в Material UI Stepper с помощью CSS API

Я хотел бы изменить цвет текста (который на самом деле является значком SVG) в Material UI StepIcon только для активных и завершенных шагов. На данный момент я успешно изменил цвет значка для этих шагов. Так теперь выглядит моя MuiTheme.

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
    }
  },
});

А весь степпер выглядит так:

Степперы с примененными цветами

Предполагая, что я хотел бы изменить цвет галочки на серый (который представляет завершенные шаги) и цвет номер два на серый (который представляет текущий активный шаг), в то время как сохранение неактивного шага без изменений (белая заливка).

Изменение свойства заливки для текста, как в официальная документация не дает никаких результатов, в инспекторе разработчика по-прежнему отображается заливка равным белому.

Я хочу применить этот стиль ко всему приложению.

Какие-нибудь советы или решения для этого?


javascript material-design material-ui css uistepper
person Bartosz    schedule 18.07.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

вам также нужно переопределить текстовый класс

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
      text: {
        fill: <YOUR_DESIRE_COLOR>
      },
     },
    }
  },
});
person Miguel C.    schedule 01.11.2018