如何覆盖标签的所选样式？

Question

我正在尝试覆盖所选标签的样式，但是某些覆盖无效。我在做，

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

在我看来，这就像文档中告诉我的那样。如果我将背景设置为selected，则背景颜色会更改，但字体颜色不会更改。

我在覆盖上做错什么了吗？

编辑

使用!important会强制使用它，但是如果可以避免的话，我不想使用！important。

Answer 1

我可以提出一个使用withStyles覆盖CSS的解决方案，

<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

希望这会对您有所帮助。