在网格项目组件MaterialUI上创建onHover时遇到问题

如何解决在网格项目组件MaterialUI上创建onHover时遇到问题

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

我想要实现的是Grid项目更改颜色 悬停

这是我所做的：

<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方式在元素上添加悬停样式。为网格项指定一个className，然后在其上添加悬停样式。

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

codesandbox链接：-https://codesandbox.io/s/o8b52

请问您是否对在网格项中使用内联样式有更多疑问。