Css 在网格项组件材质上创建onHover时遇到问题

我正在创建一个网格布局，其中包含嵌套的网格组件。但是，由于某些原因，我不明白，在网格项组件中使用内联样式是不可行的。请帮忙，我在ReactJS中使用MaterialUI是一个新手。网格封装在仅在移动设备中显示的隐藏组件中

我试图实现的是网格项在屏幕上改变颜色 盘旋

以下是我所做的：

<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='#'>
                &diams; Github &diams;
              </a>
            </Grid>
            <Grid
              item
              xs={4}
              style={{ justifyContent: 'center', display: 'flex' }}
            >
              <a
                href='#'
                target='_blank'
              >
                &diams; LinkedIn &diams;
              </a>
            </Grid>
            <Grid
              item
              xs={4}
              style={{ justifyContent: 'center', display: 'flex' }}
            >
              <a
                href='#'
                target='_blank'
              >
                &diams; Codewars &diams;
              </a>
            </Grid>
          </Grid>
        </Hidden>

---

要在网格项上获得悬停样式，必须在网格项上添加悬停样式。并且不能以内联CSS的方式在元素上添加悬停样式。为网格项指定一个类名，然后在这些网格项上添加悬停样式

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}
        >
          <a href="#">&diams; Github &diams;</a>
        </Grid>
        <Grid item xs={4} className={classes.item}>
          <a href="#" target="_blank">
            &diams; LinkedIn &diams;
          </a>
        </Grid>
        <Grid item xs={4} className={classes.item}>
          <a href="#" target="_blank">
            &diams; Codewars &diams;
          </a>
        </Grid>
      </Grid>
    </Hidden>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core”导入{Hidden}”；
const useStyles=makeStyles（（主题）=>({
项目：{
颜色：“#fff”，
辩护内容：“中心”，
显示：“flex”，
“&：悬停”：{
“&>a”：{
颜色：'绿色'
}
}
}
}));
导出默认函数SpacingGrid（）{
const classes=useStyles（）；
返回(
);
}

代码沙盒链接：-

请详细说明您对在网格项中使用内联样式的疑问