Having trouble creating onHover on Grid item component MaterialUI - css

Question

I am creating a Grid layout that has nested Grid components in it. However, for some reason I do not understand, using an inline style in the Grid item component does not work. Please help, I am quite new in using MaterialUI in ReactJS. The Grid is encapsulated inside a Hide component that only shows in mobile devices.
What I am trying to achieve is that the Grid item change color on
hover
Here is what I did:
<Hidden mdUp='hide'>
<Grid
container
xs={12}
style={{
fontFamily: 'Old Newspaper',
background: '#f49275',
'&:hover': { background: 'black' },
marginLeft: '4px',
marginRight: '4px',
}}
>
<Grid
item
xs={4}
style={{
justifyContent: 'center',
display: 'flex',
}}
>
<a href='#'>
♦ Github ♦
</a>
</Grid>
<Grid
item
xs={4}
style={{ justifyContent: 'center', display: 'flex' }}
>
<a
href='#'
target='_blank'
>
♦ LinkedIn ♦
</a>
</Grid>
<Grid
item
xs={4}
style={{ justifyContent: 'center', display: 'flex' }}
>
<a
href='#'
target='_blank'
>
♦ Codewars ♦
</a>
</Grid>
</Grid>
</Hidden>

Answer 1

To get hover style on grid items you've to add hover style on grid items. And you can't add hover styles on an element in inline CSS way. Give a className to grid items and then add hover styles on those.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import { Hidden } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
item:{
color:'#fff',
justifyContent: "center",
display: "flex",
'&:hover':{
'&>a':{
color:'green'
}
}
}
}));
export default function SpacingGrid() {
const classes = useStyles();
return (
<Hidden mdUp="hide">
<Grid
container
className={classes.container}
xs={12}
style={{
fontFamily: "Old Newspaper",
background: "#f49275",
marginLeft: "4px",
marginRight: "4px"
}}
>
<Grid
item
xs={4}
className={classes.item}
>
♦ Github ♦
</Grid>
<Grid item xs={4} className={classes.item}>
<a href="#" target="_blank">
♦ LinkedIn ♦
</a>
</Grid>
<Grid item xs={4} className={classes.item}>
<a href="#" target="_blank">
♦ Codewars ♦
</a>
</Grid>
</Grid>
</Hidden>
);
}
codesandbox link:- https://codesandbox.io/s/o8b52
And can you please elaborate more your doubt about using inline style in grid item.