CardMedia添加Hover缩放效果失效问题求助

你的代码有两个关键问题导致效果失效：

1. CardMedia的style属性写法错误：style={{ mediaStyle }}是把样式对象嵌套在了另一个对象里，相当于给style传了{ mediaStyle: {...} }，正确的写法应该是直接传style={mediaStyle}。
2. 原生内联style不支持&:hover这种伪类语法，这种CSS-in-JS的伪类写法只能在Material UI专门的样式方案里生效，比如sx属性、styled组件或者makeStyles。

下面给你两种可行的修复方案：

方案1：用sx属性（MUI v5+推荐） #

sx是MUI v5新增的属性，支持直接写带伪类的样式，用法最简洁：

// 定义样式
const mediaSx = {
  transition: "transform 1s",
  "&:hover": {
    transform: "scale(1.6)",
  },
};

// 渲染部分
{data.map((i, index) => (
  <Grid
    item
    xs={12}
    sm={6}
    md={4}
    lg={3}
    key={index} // 别用listOfPrjects.indexOf(elem)，用index或item的唯一ID更可靠
  >
    <Card style={cardStyle} sx={{ overflow: "hidden" }}>
      <CardMedia sx={mediaSx} />
      <CardHeader title={i.title}/>
    </Card>
  </Grid>
))}

方案2：用styled组件封装 #

如果需要在多个地方复用这个带hover效果的CardMedia，可以用styled创建自定义组件：

import { styled } from '@mui/material/styles';
import CardMedia from '@mui/material/CardMedia';

// 创建自定义CardMedia组件
const HoverScaledCardMedia = styled(CardMedia)`
  transition: transform 1s;
  &:hover {
    transform: scale(1.6);
  }
`;

// 渲染时直接使用
{data.map((i, index) => (
  <Grid
    item
    xs={12}
    sm={6}
    md={4}
    lg={3}
    key={index}
  >
    <Card style={cardStyle} sx={{ overflow: "hidden" }}>
      <HoverScaledCardMedia />
      <CardHeader title={i.title}/>
    </Card>
  </Grid>
))}

额外提醒 #

• 给外层Card加上overflow: hidden，能防止CardMedia缩放后超出卡片的边界，视觉效果更规整。
• 循环的key尽量用每个item的唯一标识（比如i.id），如果没有的话用index也比listOfPrjects.indexOf(elem)靠谱，后者在数组元素重复或顺序变化时会导致key不稳定，引发组件渲染异常。

内容的提问来源于stack exchange，提问作者Shoppe