我正在使用带有反应的材料 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>
);
}
答案 0 :(得分:1)
您应该尝试在悬停属性中省略该空格,并编写“&:hover”而不是“&(space):hover”。它在您的沙箱代码中运行良好。
答案 1 :(得分:0)
在 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>
);
}