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

Question

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

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

在最新的material ui版本

v4.9.11

中，需要使用指示器道具来应用下划线颜色

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