material-ui button active style

Question

I am trying to workout how I would have appbar buttons that link to components show a different style when active.

I should also note: this is a my first material-ui app and the docs are not so clear.

Basically I want an underline on the button that is active.

<Button color="inherit" component={Link} to={"/"}>Home</Button>
<Button color="inherit" component={Link} to={"/About"}>About</Button>

My full 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 => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    fab: {
      position: 'absolute',
      background:'red',
      bottom: theme.spacing(2),
      right: theme.spacing(2),
      "&:hover, &: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 => { 
      setIcon(!icon)
      { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
    }


    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" align="center" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
            <Button color="inherit" component={Links} to={"/"} linkButton={true}>Home</Button>
            <Button color="inherit" component={Links} to={"/about"}>About</Button>
          </Toolbar>
        </AppBar>
        <AppBar position="static">
      </AppBar>
        <audio id="player">
                <source
                    src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639"
                    type="audio/mpeg"
                />
            </audio>
            <Fab aria-label='test' className={classes.fab}>
            <i className='large material-icons' style={fabIcon} onClick={handleClick}>
            { icon ? 'play_circle_outline' : 'pause_circle_outline'}</i>
          </Fab>
      </div>
    );
  }


  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 (
        <div> 
          <Nav />
        </div>
      );
    }
  }

Answer 1

I recently had the same issue, and I solved it by using NavLink instead of Link from react-router-dom!

Example:

<Button
  className={classes.button}
  component={NavLink}
  to="/page-link"
>

This will add the class ".active" to active buttons.

Using material's makeStyles hook, you can then style the buttons with this class:

const useStyles = makeStyles({
  button: {
    "&.active": {
      background:'black',
    },
  },
});