React Material UI Tabs通过十六进制添加指示器颜色？

【问题标题】：React Material UI Tabs adding indicator color via hex?React Material UI Tabs通过十六进制添加指示器颜色？
【发布时间】：2018-10-26 01:19:42
【问题描述】：

我得到了这个 Material UI 组件

<Tabs
   textColor="primary"
   indicatorColor="primary"
>
   <Tab label="All Issues"/>
</Tabs>

根据doc的indicatorColor和textColor只能设置'primary'或者'secondary'，它是一个枚举。我希望能够将这些颜色设置为自定义的十六进制值。我尝试了像'textcolor =“#ffffff”'这样的硬编码，但它没有用。有什么建议吗？

【问题讨论】：

看看这个，他们有四种不同的方式来覆盖你的组件的样式，你可以看到代码。 See examples

标签： css reactjs material-ui

【解决方案1】：

您可以使用indicator 和label 更改标签的css。

jss 变化

const styles = theme => ({
  label: {
    color: '#FFF000'
  },
  indicator: {
    backgroundColor: '#FFF'
  }
});

这样的标签

<Tabs indicatorColor="primary" classes={{ indicator: classes.indicator }} value={value} onChange={this.handleChange}>
        <Tab classes={{ label: classes.label }} label="Item One" />
        <Tab classes={{ label: classes.label }} label="Item Two" />
        <Tab classes={{ label: classes.label }} label="Item Three" />
      </Tabs>

在上面的代码中，标签标签将呈现yellow，指示器呈现为white

在此处查看工作示例：https://codesandbox.io/s/8111zjxm0l

希望这会有所帮助。

【讨论】：