Next.js+Material UI实现商品卡片悬停时在图片中央显示加入购物车按钮

问题原因 #

1. 绝对定位元素需要依赖最近的position为非static值的父元素作为定位基准，你当前没有给外层Card设置相对定位，所以按钮的绝对定位基准错误，无法移动到图片区域
2. 你的类名存在拼写不一致问题：组件内使用的是addTocart，样式代码里定义的是addToCart，会导致样式不生效

可直接使用的样式代码 #

修改你的styles.js如下，原有样式保留，新增/修改对应配置即可：

card: {
  // 保留原有card的其他样式，新增以下2行
  position: "relative",
  overflow: "hidden",
},
cardContent: {
  display: 'flex',
  justifyContent: "space-between"
},
// 修正类名和组件内保持一致
addTocart: {
  position: "absolute",
  // 水平垂直居中定位到图片区域
  top: "30%",
  left: "50%",
  transform: "translateX(-50%) translateY(-50%)",
  width: "85%",
  opacity: 0,
  transition: "all 0.25s ease",
  zIndex: 9,
},
// 卡片悬停时显示按钮
"&:hover .addTocart": {
  opacity: 1,
},
// 可选：悬停时降低图片亮度，提升按钮可读性
cardMedia: {
  // 保留原有cardMedia的其他样式，新增以下2行
  transition: "filter 0.25s ease",
},
"&:hover .cardMedia": {
  filter: "brightness(0.75)",
}

补充说明 #

如果你的项目使用的是MUI v5的styled方案而非makeStyles，只需要将hover的嵌套语法对应调整为styled组件支持的写法即可，核心定位逻辑不变。

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