我正在使用材料UI，当你将鼠标悬停在卡片上时，我希望放大卡片，如所示
我应该如何做到这一点？我使用了引发的属性，但这不是我想要的。我甚至看到有人使用zDepth，但它也不起作用。我的文件如下：
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import theme from '../theme';
const useStyles = makeStyles({
root: {
maxWidth: 310,
margin: theme.spacing(5),
},
});
export default function ImgMediaCard(props) {
const classes = useStyles();
const [state, setState] = useState({
raised:false,
shadow:1,
})
return (
<Card className={classes.root}
onMouseOver={()=>setState({ raised: true, shadow:3})}
onMouseOut={()=>setState({ raised:false, shadow:1 })}
raised={state.raised} zDepth={state.shadow}>
<CardActionArea>
<CardMedia
component="img"
alt={props.alt}
height="140"
image={props.img}
title={props.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.caption}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
看起来该网站在cards上的实现在悬停时使用transform: scale3d，所以您可以直接执行相同的操作，因为您正在复制行为。我利用了您已经拥有的raise状态，而不是伪类:hover。参见以下代码：
const useStyles = makeStyles({
root: {
maxWidth: 310,
transition: "transform 0.15s ease-in-out"
},
cardHovered: {
transform: "scale3d(1.05, 1.05, 1)"
}
});
function ImgMediaCard(props) {
const classes = useStyles();
const [state, setState] = useState({
raised:false,
shadow:1,
})
return (
<Card className={classes.root}
classes={{root: state.raised ? classes.cardHovered : ""}}
onMouseOver={()=>setState({ raised: true, shadow:3})}
onMouseOut={()=>setState({ raised:false, shadow:1 })}
raised={state.raised} zdepth={state.shadow}>
<CardActionArea>
<CardMedia
component="img"
alt={props.alt}
height="140"
image={props.img}
title={props.title}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.caption}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
ReactDOM.render(
<ImgMediaCard title="title" caption="caption" description="description" img="https://via.placeholder.com/310x140" />,
document.getElementById("root")
);<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { useState } = React;
const { Card, CardActionArea, CardActions, CardContent, CardMedia, Button, Typography, makeStyles } = MaterialUI;
</script>
</body>使用"amp"定义悬停的样式。使用你的卡的根样式中的"&:hover"。
const useStyles = makeStyles({
root: {
maxWidth: 310,
transition: "transform 0.15s ease-in-out",
"&:hover": { transform: "scale3d(1.05, 1.05, 1)" },
},
});在@Saud00回答之后，这是MUI v5方法：
const StyledCard = styled(Card)(({ theme }) => ({
transition: "transform 0.15s ease-in-out",
"&:hover": { transform: "scale3d(1.02, 1.02, 1)" },
}))
<StyledCard>
{/* Rest of card */}
</StyledCard>