Question

我有这个Material UI组件

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

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

Answer 1

您可以使用{1:[0, 1, 4], 2:[2, 3, 5]}和indicator来更改选项卡的CSS。

jss更改

label

这样的标签

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

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

希望这会有所帮助。

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

1 个答案: