title: How do I make each box of the Tabs panel coloured when selected?
body: <p>I need to make the individual tab bar light up (or coloured) when each is selected, however, I do not know how to do it. Can someone teach me please?:)</p>
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
  
  const useStyles = makeStyles({
    root: {
      flexGrow: 1,
    },
  });
  
  export default function CenteredTabs() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);
  
    const handleChange = (event, newValue) =&gt; {
      setValue(newValue);
    };
  
    return (
      &lt;Paper className={classes.root}&gt;
        &lt;Tabs
          value={value}
          onChange={handleChange}
          indicatorColor=&quot;primary&quot;
          textColor=&quot;primary&quot;
          centered
        &gt;
          &lt;Tab label=&quot;Item One&quot; /&gt;
          &lt;Tab label=&quot;Item Two&quot; /&gt;
          &lt;Tab label=&quot;Item Three&quot; /&gt;
        &lt;/Tabs&gt;
      &lt;/Paper&gt;
    );
  </code></pre>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/QOsZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QOsZs.png" alt="enter image description here" /></a></p>