title: material-ui button active style
body: <p>I am trying to workout how I would have appbar buttons that link to components show a different style when active.</p>
  
  <p>I should also note: this is a my first material-ui app and the docs are not so clear.</p>
  
  <p>Basically I want an underline on the button that is active.</p>
  
  <pre><code>&lt;Button color="inherit" component={Link} to={"/"}&gt;Home&lt;/Button&gt;
  &lt;Button color="inherit" component={Link} to={"/About"}&gt;About&lt;/Button&gt;
  </code></pre>
  
  <p>My full code.</p>
  
  <pre><code>import React, {useState } from 'react';
  import { Link as Links } from 'react-router-dom';
  import ReactDOM from 'react-dom';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Fab from '@material-ui/core/Fab';
  //import Icon from '@material-ui/core/Icon';
  import Toolbar from '@material-ui/core/Toolbar';
  import Link from '@material-ui/core/Link';
  import Typography from '@material-ui/core/Typography';
  import Button from '@material-ui/core/Button';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  
  const useStyles = makeStyles(theme =&gt; ({
      root: {
        flexGrow: 1,
      },
      menuButton: {
        marginRight: theme.spacing(2),
      },
      fab: {
        position: 'absolute',
        background:'red',
        bottom: theme.spacing(2),
        right: theme.spacing(2),
        "&amp;:hover, &amp;:focus":{
          background:'black',
        }
      },
      title: {
        flexGrow: 1,
        align:'center',
      },
    }));
  
  
  
    function Nav() {
  
      const classes = useStyles();
      const [icon,setIcon] = useState(false)
  
      const fabIcon = {
        color: 'white',
        fontSize: 40,
      };
  
  
      const handleClick = e =&gt; { 
        setIcon(!icon)
        { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
      }
  
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;AppBar position="static"&gt;
            &lt;Toolbar&gt;
              &lt;IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu"&gt;
                &lt;MenuIcon /&gt;
              &lt;/IconButton&gt;
              &lt;Typography variant="h6" align="center" className={classes.title}&gt;
                News
              &lt;/Typography&gt;
              &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
              &lt;Button color="inherit" component={Links} to={"/"} linkButton={true}&gt;Home&lt;/Button&gt;
              &lt;Button color="inherit" component={Links} to={"/about"}&gt;About&lt;/Button&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          &lt;AppBar position="static"&gt;
        &lt;/AppBar&gt;
          &lt;audio id="player"&gt;
                  &lt;source
                      src="https://samcloud.spacial.com/api/listen?sid=106487&amp;m=sc&amp;rid=184639"
                      type="audio/mpeg"
                  /&gt;
              &lt;/audio&gt;
              &lt;Fab aria-label='test' className={classes.fab}&gt;
              &lt;i className='large material-icons' style={fabIcon} onClick={handleClick}&gt;
              { icon ? 'play_circle_outline' : 'pause_circle_outline'}&lt;/i&gt;
            &lt;/Fab&gt;
        &lt;/div&gt;
      );
    }
  
  
    export default class GrandChild extends React.Component {
  
      componentDidMount() {
        setTimeout(function(){ document.getElementById("player").play() }, 3000);
      }
  
      value() {
        return ReactDOM.findDOMNode(this.refs.input).value;
      }
  
      render() {
        return (
          &lt;div&gt; 
            &lt;Nav /&gt;
          &lt;/div&gt;
        );
      }
    }
  </code></pre>