如何更改 MaterialUI 的 React Tabs 组件的下划线颜色？

Question

我注意到 MaterialUI 的网站上没有关于更改其选项卡组件的下划线颜色的文档......

http://www.material-ui.com/#/components/tabs

Answer 1

使用 TabIndicatorProps 属性更改下划线颜色。

<Tabs TabIndicatorProps={{style: {backgroundColor: "white"}}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>

Answer 2

可以使用

inkBarStyle 道具更改此属性：

<Tabs inkBarStyle={{backgroundColor: '#e77600'}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>

Answer 3

如果要

通过在自定义主题中重写样式在 MUI v5 中配置此设置，可以使用以下内容：

MuiTabs: {
  defaultProps: {
    TabIndicatorProps: { style: { backgroundColor: '#e77600' } },
  },
}

Answer 4

<Tabs indicatorColor="white">
   <Tab label="Tab 1"/>
   <Tab label="Tab 2"/>
</Tabs>

指示颜色可以采用任何颜色，例如白色、红色、绿色等

Answer 5

在最新的材质UI版本v4.9.11中，需要使用指标道具应用下划线颜色

<Tabs indicator={{backgroundColor: '#e77600'}}>
   <Tab label='Tab 1'/>
   <Tab label='Tab 2'/>
</Tabs>