Как я могу переопределить выбранный стиль для вкладки?

Question

Я пытаюсь переопределить стиль для выбранной вкладки, но некоторые переопределения не работают. Я делаю,

const StyledTab = withStyles({
    root: {
        color: '#0071bc',
        fontWeight: '600'
    },
    selected: {
        color: '#fff' <--- doesn't work
    }
})(Tab)

, что для меня похоже на то, что говорит мне документация. Если я установлю фон selected, цвет фона изменится, а цвет шрифта - нет.

Что-то не так с переопределением?

Редактировать

Использование !important форсирует это, но я не хочу использовать! Важно, если я могу избежать этого.

Answer 1

Я мог бы придумать решение, использующее переопределение CSS с использованием withStyles,

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  classes={{ indicator: classes.tabsIndicator }}
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
</Tabs>

Если мы примем это как код, вы можете использовать эти стили для переопределения,

const styles = theme => ({
  tabsIndicator: {
    backgroundColor: "red"
  },
  tabRoot: {
    "&:hover": {
      color: "red",
      opacity: 1
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium
    },
    "&:focus": {
      color: "red"
    }
  },
  tabSelected: {}
});

найтичто tabSelected является пустым значением, но &$tabSelected переопределяет значения

, вот рабочий пример - https://codesandbox.io/s/882o65xlyl

надеюсь, это поможет вам.