如何在悬停时更改材质 ui 卡的背景颜色？答案

【问题标题】：how do I change background color of material ui card on hover?如何在悬停时更改材质 ui 卡的背景颜色？
【发布时间】：2021-05-06 10:56:08
【问题描述】：

我正在使用带有反应的材料 ui 我想知道 如何在用户悬停时更改卡片组件的背景颜色？

这是我在 codeasandbox 中的实时代码link。

下面我也放了我的代码。

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

【问题讨论】：

去掉&后面的空格
谢谢！哦，我的上帝，这是一个错字，我想这是怎么回事？ :-p

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

您应该尝试在 hover 属性中省略该空格，并编写“&:hover”而不是“&(space):hover”。它在您的沙盒代码中运行良好。

【讨论】：

是的，我最近这样做了，所以我也在这里回答。谢谢。

【解决方案2】：

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

【讨论】：