How change active tab color in React material-ui?

Question

How I can change the color of the active tab?

I mean, this pink line, look at the pic.

Answer 1

Well, you have two options:

You could customize the theme:
http://www.material-ui.com/#/customization/themes

But the easiest way would be using the inkBarStyle property.
You can see it in the docs..
Example:

<Tabs inkBarStyle={{background: 'blue'}}>...

Answer 2

For material-ui version 1.0.0-beta.36, the following worked for me:

<Tabs indicatorColor={'HEX_COLOR'}>

inkBarStyle must've been deprecated/replaced by indicatorColor in v1.0

EDIT: Link to v1.0 docs: https://material-ui-next.com/api/tabs/

EDIT: Following the stable release of v1.0, it appears the previous solution no longer works.

Here are remaining solutions:

1. Use a classes override for the indicator class. Link to docs on overrides. Link to docs Tab component with CSS API classes at bottom.
2. Configure your theme palette to use your desired color via the primary or secondary color intentions. You may then specify your desired primary or secondary color to be used with the indicatorColor attribute mentioned above. Link to Docs.

Classes overrides may be the easier option. You need to use the withStyles component in order to inject your custom style classes. The reason being that the library's styling will override your classes or styled-components. The docs linked above provide a great example.

Answer 3

@Risa's solution works just fine and should be the accepted answer. My example of her explanation looks like this:

<Tabs
  fullWidth
  centered
  classes={{
    indicator: classes.indicator
  }}>
    <Tab />
    <Tab />
</Tabs>

and the styles:

const styles = theme => ({
  indicator: {
    backgroundColor: 'white',
  },
})

Answer 4

Met this question just, hope help your guys;

          <Tabs classes={{ indicator: `your classes like underline` }} >
            <Tab
              classes={{ selected: `your classes like underline` }}
            />
            <Tab
              classes={{ selected: classes.selectedTab }}
            />
          </Tabs>

Answer 5

I put here a end of 2019's update because I didn't found my answer here. A lot of answers are depreciated.

The best way to override without having too much pain seems to use the makeStyle and withStyles of material-ui.

Here is an exemple with tabs.

you need to import makeStyles

    import { makeStyles } from '@material-ui/core/styles'
    import Tabs from '@material-ui/core/Tabs'

here are my customs classes using makeStyles()

     const useStyles = makeStyles((theme) => ({
     customOne: {
        padding: '3rem 15rem',
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        fontFamily: 'Open Sans',
     },
     customTwo: {
        padding: '0rem',
        color: '#484848',
        backgroundColor: 'white',
        fontFamily: 'Open Sans',
        fontSize: '1rem',
    },
   }))

For more overrides you can also create a function that use props using by material ui (root, etc.) using withStyles() :

    const TabStyle = withStyles((theme) => ({
    root: {
       padding: '1rem 0',
       textTransform: 'none',
       fontWeight: theme.typography.fontWeightRegular,
       fontSize: '1.2rem',
       fontFamily: [
           '-apple-system',
           'BlinkMacSystemFont',
           'Roboto',
       ].join(','),
       '&:hover': {
          backgroundColor: '#004C9B',
          color: 'white',
          opacity: 1,
       },
      '&$selected': {
          backgroundColor: '#004C9B',
          color: 'white',
          fontWeight: theme.typography.fontWeightMedium,
      },
  },
  tab: {
      padding: '0.5rem',
      fontFamily: 'Open Sans',
      fontSize: '2rem',
      backgroundColor: 'grey',
      color: 'black',
      '&:hover': {
          backgroundColor: 'red',
          color: 'white',
          opacity: 1,
      },
  },
  selected: {},
  }))((props) => <Tab {...props} />)

in my component I define : const classes = useStyles() that permit to change my useStyles props in classes.

I use my custom classes whenever I want like this : className={classes.customOne}

    export default function TabsCustom({ activeTabIndex, onChange, values }) {
    const classes = useStyles()
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
       setValue(newValue)
  }


    return (
        <div className={classes.customOne}>
            <Tabs
                className={classes.customTwo}
                variant="fullWidth"
                value={activeTabIndex}
                onChange={onChange}
                aria-label="tabs"
            >
                <TabStyle
                    value="updateDate"
                    icon={(<Icon>insert_invitation</Icon>)}
                    label={i18n.perYear}
                />

            </Tabs>
    </div>
   )
 }

Hope it help. Personnaly I would have gained a lot of time (and pain) if I had found this explanation.

Answer 6

You can try this material UI latest version support TabIndicatorProps through which you can pass style key.

<Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}>......