如何在材料 UI v1 中实现自定义选项卡指示器颜色

Question

我在生产站点上运行了MUI v1 beta 32，非常好。 是时候更新到 v1 了！ 到目前为止，更改非常简单。这主要是更新导入标签的问题。

但是我选择的<Tab/>指标遇到了问题。 我正在使用rootInheritSelected样式覆盖来应用我选择的颜色。

如何在 v1 中实现它？

Answer 1

最后我发现它简单得多：

<Tabs
textColor="inherit"
fullWidth
centered
classes={{
indicator: classes.indicator
}}>
<Tab />
<Tab />
</Tabs>

和样式：

const styles = theme => ({
indicator: {
backgroundColor: 'white',
},
})

Answer 2

我能够用TabIndicatorProps做到这一点。

例：

<Tabs
value={this.state.value}
onChange={(event, newValue) => {
this.setState({value: newValue})
}}
TabIndicatorProps={{
style: {
backgroundColor: "your_custom_color"
},
}}
>

这还允许我根据处于活动状态的选项卡添加不同的指标颜色