I've been attempting to hover over Link from Material UI, but unfortunately, it's not working as expected. The CSS styles are not being applied for some unknown reason, and I can't seem to figure out why. Additionally, the Button class is also not functioning properly on buttons. I'm currently using the most recent version of MUI.
import {Link , Button} from '@mui/material';
import {makeStyles} from '@mui/styles';
const useStyle = makeStyles({
MenuItems : {
'& li' : {
display : 'inline',
marginRight : '2rem',
'&:hover' : {
color : '#E0475B'
}
}
},
Link : {
'&:hover' : {
color : '#E0475B'
}
},
Button : {
backgroundColor : '#E0475B' ,
color : 'white',
fontSize : '1.5rem'
}
})
const HomeMenu = () => {
const classes = useStyle();
return (
<div className="Body">
<AppBar style={{backgroundColor : 'white'}}>
<Toolbar className = {classes.Toolbar}>
<div className={classes.MenuItems}>
<ul>
<li>
<Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link} >Home</Link>
</li>
<li>
<Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>About Us</Link>
</li>
<li>
<Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>Our Mission</Link>
</li>
<li>
<Link href = '/' underline = 'none' style={{color : 'black'}} className={classes.Link}>Contact Us</Link>
</li>
</ul>
</div>
<div className={classes.ButtonItems}>
<ul>
<li><Button variant='contained' className = {classes.Button}>Sign Up</Button></li>
<li><Button variant = 'contained' className = {classes.Button}>Log In</Button></li>
</ul>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default HomeMenu;