React Material UI Tabs adding indicator color via hex?

Question

I got this Material UI component

<Tabs
   textColor="primary"
   indicatorColor="primary"
>
   <Tab label="All Issues"/>
</Tabs>

According to the doc indicatorColor and textColor can only be set to 'primary' or 'secondary', it's an enumeration. I want to be able to set those colors to a custom hex value. I tried just hard coding in like 'textcolor="#ffffff"', but it didn't work. Any advice?

Answer 1

You can use indicator and label for chaning the css for the tabs.

jss changes

const styles = theme => ({
  label: {
    color: '#FFF000'
  },
  indicator: {
    backgroundColor: '#FFF'
  }
});

Tabs like this

<Tabs indicatorColor="primary" classes={{ indicator: classes.indicator }} value={value} onChange={this.handleChange}>
        <Tab classes={{ label: classes.label }} label="Item One" />
        <Tab classes={{ label: classes.label }} label="Item Two" />
        <Tab classes={{ label: classes.label }} label="Item Three" />
      </Tabs>

Here in this above code the tab label will render yellow and indicator as white

check out the working example here: https://codesandbox.io/s/8111zjxm0l

Hope this will help.

Answer 2

Just follow these step mui v5.8.4 work for me

 <Tabs
      orientation="vertical"
      variant="scrollable"
      value={valueTab}
      onChange={handleChangeTabs}
      aria-label="Vertical tabs example"
      
      sx={{
        "& button:hover": { background: "your color on hover" },
        "& button.Mui-selected": { background: "your color on slected",color:"your text color on selected " },
        
      }}
       
      textColor="secondary"
      TabIndicatorProps={{
        style: {
          backgroundColor: "#5B4A42",
         
        },
      }}
    
    >

Image