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

【问题标题】：How can I change the underline color of MaterialUI's React Tabs component?如何更改 Material UI React Tabs 组件的下划线颜色？
【发布时间】：2018-07-06 01:37:44
【问题描述】：

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

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

【问题讨论】：

标签： reactjs tabs material-ui underline

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这个属性可以用 inkBarStyle 属性改变：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：