Tabs custom color support for indicatorColor and textColor props

[zachrdz]

Tabs support for a custom indicatorColor value of a hexCode or RGB color seems to have been removed since sometime after version v1.0.0-beta.38. Now it only supports primary or secondary as prop values.

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When using the Tabs component and passing in an indicatorColor or textColor props value of a hexCode such as "#7C4DFF" or rgb string like "rgb(124, 77, 255)", the tabs indicator and text color should use that color given.

Current Behavior

The Tabs component indicatorColor and textColor props only support an enum of primary and secondary as their values.

Steps to Reproduce (for bugs)

Context

I have created an application that revolves around different teams and each team has their own team colors. I'm using this Tabs component to switch between displaying information about each team and I loved having the ability to have each tab colored differently depending on the team shown with the older versions. Being limited to two colors throughout the application makes sense for other components, but I feel like keeping this Tabs component customizable would be more favorable for its use cases.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.42
React	^16.3.1
browser	Chrome
etc

[oliviertassinari]

Tabs support for a custom indicatorColor value of a hexCode or RGB color seems to have been removed since sometime after version v1.0.0-beta.38. Now it only supports primary or secondary as prop values.

@zachrdz You are right. It was removed in v1.0.0-beta.42: #10999

[oliviertassinari]

I have created an application that revolves around different teams and each team has their own team colors.

It sounds like you need dynamic styles. We would accept a pull-request for adding a TabIndicatorProps property if that help.

[zachrdz]

Great! Thank you for the response and clarification. I will work on a pull request for this enhancement.

[adeelibr]

Is anyone working on this actively? If not, I would love to get my hands dirty.
I have been meaning to start contributing & would love to work on this one and figure stuff out.

[oliviertassinari]

@adeelibr You are free to go 🏎 :)

[adeelibr]

@oliviertassinari I tested it with primary, secondary, hex codes, rgba color code. The indicator color is now changing. Can you kindly review my PR #11254

[tyrsensei]

Hello,

Sorry to refresh a closed issue, but I don't see how you can change de TabIndicator color with the new TabIndicatorProps property.

It appears that defining the style overrides the one generated by the Tabs component (indicatorStyle that is, changing its width).

Could someone please enlighten me ?

Thanks in advance.

[oliviertassinari]

It appears that defining the style overrides the one generated by the Tabs component

@tyrsensei You are right. We can do a second iteration on the issue to correctly merge the style.

[adeelibr]

Can I work on this second iteration again? @oliviertassinari

[oliviertassinari]

@adeelibr Sorry, I should have kept your merge logic 👍.

[adeelibr]

No worries, I'll add that change again, & update it with a PR.

[jpung]

@oliviertassinari I'm not sure if it was the intention but there no longer is a MuiTabIndicator style that can be overridden via createMuiTheme. I've noticed this on top of a few other css classes that no longer start with Mui (e.g MuiStepPositionIcon is now StepPositionIcon).

I understand the reasoning behind the change(allowing custom css change from the component end), however is it possible to still allow global overriding? or at least access to the style for changes. As of now any changes made on the themes overrides will not work if they are on these new class names.

[oliviertassinari]

I'm not sure if it was the intention but there no longer is a MuiTabIndicator style that can be overridden via createMuiTheme.

@josephpung Yes, it's intentional.

I've noticed this on top of a few other css classes that no longer start with Mui (e.g MuiStepPositionIcon is now StepPositionIcon).

It only works in development mode. I have never seen someone trying to use it. At some point, we might want to prevent this in the first place to avoid people realizing it doesn't work once in production.

however is it possible to still allow global overriding?

You can still override the style. Use theme.overrides.MuiTabs.indicator.

[adeelibr]

I have made a PR can you kindly have a look at it #11494 @oliviertassinari

[ChaoTzuJung]

Excuse me, I add TabIndicatorProps property in Tabs and give height and color , but it not work !?

And Material UI document said

Tabs component is a public module while TabIndicator is private.

https://material-ui.com/guides/minimizing-bundle-size/#option-1

So , Can I change Props indicatorColor to other style ?

[oliviertassinari]

How can I change the indicator color?

@ChaoTzuJung You have two options. Either you can use the CSS API with the classes.indicator customization point or you can use the inline-style API with the TabIndicatorProps property (style.backgroundColor).

[yaminyaylo]

I think it will be better to have TabIndicator element (with it's CSS Api) in a Component Api. But the best would be overriding in theme.

[tonymckendry]

@oliviertassinari are the docs wrong about setting the indicatorColor prop to "primary" or "secondary" now? Doesn't seem to be working for me that way, and based on your previous comment looks like this is done differently now? Just want to be sure, and I'll put in a PR for you!

[tonymckendry]

Scratch that - I got it working now. My mistake!

[Jonathanx5]

Could Help ....
For this work perfectly

<Tabs
  value={value}
  onChange={this.handleChange}
  TabIndicatorProps={{
    style: {
      backgroundColor: "#D97D54"
    }
  }}
>
...
</Tabs>

or you can target the .MuiTabs-indicator class name.

[tavishiChat]

above thing worked for me
Thanks

[japrogramer]

the above only changes the bottom indicator, how do i change the background color of the entire tab?

[F1LT3R]

What about a custom textColor?

[zachrdz]

What about a custom textColor?

This can be changed using the CSS API to override the existing css classes that are being used by the component. Here is an example where we provide a custom indicator color, background color and text color by modifying the root and indicator classes that are used by the Tabs component. We create our own classes and hand them over to map to the existing classes.

const useStyles = makeStyles(theme => ({
  customTabRoot: {
      color: "red",
      backgroundColor: "green"
  },
  customTabIndicator: {
      backgroundColor: "orange"
  }
}));

...
...

const classes = useStyles();

...

<Tabs
     value={value}
     onChange={handleChange}
     aria-label="simple tabs example"
     classes={{
         root: classes.customTabRoot,
         indicator: classes.customTabIndicator
     }}
>
     <Tab label="Item One" {...a11yProps(0)} />
     <Tab label="Item Two" {...a11yProps(1)} />
     <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

Here is a CodeSandbox with the above snippet working.

[adisher]

I was searching for the solution and found the following on Stackoverflow:

<Tabs
  TabIndicatorProps={{
    style: {
      height:"10px",
    }
  }}
  onChange={handleChange}
  value={value}
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

I wanted to read more so came here from another GitHub duplicate issue. Love this community support!

[OferLahav2]

What about a custom textColor?

This can be changed using the CSS API to override the existing css classes that are being used by the component. Here is an example where we provide a custom indicator color, background color and text color by modifying the root and indicator classes that are used by the Tabs component. We create our own classes and hand them over to map to the existing classes.

const useStyles = makeStyles(theme => ({
  customTabRoot: {
      color: "red",
      backgroundColor: "green"
  },
  customTabIndicator: {
      backgroundColor: "orange"
  }
}));

...
...

const classes = useStyles();

...

<Tabs
     value={value}
     onChange={handleChange}
     aria-label="simple tabs example"
     classes={{
         root: classes.customTabRoot,
         indicator: classes.customTabIndicator
     }}
>
     <Tab label="Item One" {...a11yProps(0)} />
     <Tab label="Item Two" {...a11yProps(1)} />
     <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

Here is a CodeSandbox with the above snippet working.

this is a better solution then the one provided in the official docs. Maybe the docs should be updated?