Javascript 如何更改悬停时材质ui卡的背景色？

我使用的是材料界面，我想知道 当用户悬停时，如何更改卡组件的背景色？

这是我在CodesAndBox中的实时代码

下面我也把我的代码

MyCard.js这里我想更改悬停时的背景色，以便填充区域更改颜色

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardMedia from "@material-ui/core/CardMedia";

const useStyles = makeStyles((theme) => ({
  root: {
    // maxWidth: 345,
    margin: theme.spacing(0.5),
    padding: theme.spacing(0.8),
    borderRadius: theme.spacing(0),
    "& :hover": {
      backgroundColor: "green"
    }
  },
  media: {
    height: 140
  }
}));

export default function MyCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root} elevation={3}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="https://images.pexels.com/photos/2787341/pexels-photo-2787341.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
          title="Face"
        />
      </CardActionArea>
    </Card>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core/CardMedia”导入CardMedia；
const useStyles=makeStyles（（主题）=>({
根目录：{
//最大宽度：345，
边距：主题。间距（0.5），
填充：主题。间距（0.8），
边界半径：主题。间距（0），
“&：悬停”：{
背景颜色：“绿色”
}
},
媒体：{
身高：140
}
}));
导出默认函数MyCard（）{
const classes=useStyles（）；
返回(
);
}

在Y.S.的帮助下，我发现这只是一个打字错误，在

&

这是工作代码

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardMedia from "@material-ui/core/CardMedia";
import { Paper } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    // maxWidth: 345,
    margin: theme.spacing(0.5),
    padding: theme.spacing(0.8),
    borderRadius: theme.spacing(0),
    "&:hover": {
      backgroundColor: "green"
    }
  },
  media: {
    height: 140
  }
}));

export default function MyCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root} elevation={3}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="https://images.pexels.com/photos/2787341/pexels-photo-2787341.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
          title="Face"
        />
      </CardActionArea>
    </Card>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core”导入{Paper}”；
const useStyles=makeStyles（（主题）=>({
根目录：{
//最大宽度：345，
边距：主题。间距（0.5），
填充：主题。间距（0.8），
边界半径：主题。间距（0），
“&：悬停”：{
背景颜色：“绿色”
}
},
媒体：{
身高：140
}
}));
导出默认函数MyCard（）{
const classes=useStyles（）；
返回(
);
}

您应该尝试忽略悬停属性中的空格，并写“&:hover”而不是“&（space）：hover”。它在您的沙盒代码中运行良好。

删除

和
之后的空格，谢谢！哦，天哪，那是个打字错误，我想这是怎么回事-派斯，我最近做了，这就是为什么我也在这里回答。非常感谢。