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

Question

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

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 props更改此属性：

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

Answer 3

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

指示灯颜色可以是任何颜色，例如白色，红色，绿色等。

Answer 4

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

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