material-ui button active style - reactjs

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',
},
},
});

Answer 2

If you're not using any third-party library like Gatsby, React-router then you should consider about this Tabs
Code:
import React from 'react';
import { makeStyles, Theme } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
interface TabPanelProps {
children?: React.ReactNode;
index: any;
value: any;
}
function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
function a11yProps(index: any) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}
To master in Material UI Tabs