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

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) => )

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 (
        

            
                insert_invitation)}
                    label={i18n.perYear}
                />

            
    
   )
 }

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