如何更改hover上材質ui卡的背景顏色？

Question

我正在使用帶有反應的材料 ui 我想知道當用戶懸停時如何更改卡片組件的背景顏色？

這是我在 codeasandbox 中的實時代碼鏈接。

下面我也放了我的代碼。

MyCard.js在這里我想改變 hover 上的背景顏色所以填充區域改變顏色

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

Answer 1

您應該嘗試在 hover 屬性中省略該空格，並編寫“&:hover”而不是“&(space):hover”。 它在您的沙盒代碼中運行良好。

Answer 2

在 YS 的幫助下，我發現這只是一個錯字，附近有多余的空間&這里是工作代碼

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