如何更改 MUI 中的活动标签颜色?

IT技术 reactjs material-ui
2021-04-27 06:51:05

如何更改活动选项卡的颜色?

我的意思是,这pink条线,看看图片。

在此处输入图片说明

4个回答

你可以试试这个材质 UI 最新版本支持 TabIndicatorProps,你可以通过它传递样式键。

<Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}>......

那么,你有两个选择:

您可以自定义主题:http :
//www.material-ui.com/#/customization/themes

但最简单的方法是使用该inkBarStyle属性。
您可以在文档中看到它..
示例:

<Tabs inkBarStyle={{background: 'blue'}}>...

@Risa 的解决方案工作得很好,应该是公认的答案。我对她的解释的例子是这样的:

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

和样式:

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

嗨,如果有人在更改颜色方面仍然有问题,以下对我有用

<Tabs
value={value}
onChange={this.handleChange}
TabIndicatorProps={{
style: {
  backgroundColor: "#D97D54"
 }
}}
>
...
</Tabs>