How can I change the underline color of MaterialUI's React Tabs component?

Question

I noticed there is no documentation on MaterialUI's website in regard to changing the underline color of their Tabs component...

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

Igloo

Answer 1

This property can be changed with the inkBarStyle props:

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

Igloo

Answer 2

Use TabIndicatorProps property to change the underline color.

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

Grubb

Answer 3

If you want to configure this in MUI v5 by overriding the style in your custom theme, you can use this:

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

Duala

Answer 4

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

Indicator Color can take any color e.g white, red, green e.t.c

Expound

Answer 5

In the latest material ui version v4.9.11, you need to use indicator props to apply underline color

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

Abruption