在Material UI中实现悬停时黑色半透明div显示在MediaCard上层的方法

改动最小实现方式（无需修改原有MediaCard组件代码） #

直接在你现有代码的MediaCard外层加一个包裹容器，内置绝对定位的遮罩层，通过hover伪类控制显隐即可，修改后的完整代码如下：

<Box>
  <Typography variant='h3'>Home Page</Typography>
  <Typography sx={{ 'margin': '15px 0' }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Typography>
  <Container sx={{ marginTop: '100px' }}>
    <Grid container spacing={6}>
      {cards.map(card => {
        return (
          <Grid item>
            <Box
              sx={{
                position: 'relative',
                // hover时显示遮罩
                '&:hover .card-overlay': {
                  opacity: 1
                }
              }}
            >
              <MediaCard {...card} />
              {/* 黑色半透明遮罩层 */}
              <Box
                className="card-overlay"
                sx={{
                  position: 'absolute',
                  inset: 0, // 等价于top/right/bottom/left都设为0
                  backgroundColor: 'rgba(0, 0, 0, 0.5)', // 最后一位是透明度，可按需调整
                  opacity: 0,
                  transition: 'opacity 0.3s ease', // 加入淡入淡出过渡效果
                  borderRadius: 'inherit', // 自动继承MediaCard的圆角，避免边角溢出
                  zIndex: 10, // 确保层级高于MediaCard
                  // 如果需要在遮罩上添加文字/按钮，可以在这里加flex布局
                  // display: 'flex',
                  // alignItems: 'center',
                  // justifyContent: 'center',
                  // color: '#fff'
                }}
                {/* 要加内容直接写在这个Box内部即可 */}
              />
            </Box>
          </Grid>
        );
      })}
    </Grid>
  </Container>
</Box >

其他可选方案（修改MediaCard内部逻辑） #

如果你想把遮罩逻辑封装到MediaCard组件内部，只需要做3处调整：

• 给MediaCard的根元素设置position: relative
• 在MediaCard内部根节点下添加上面的遮罩层代码
• 给MediaCard根元素的sx属性添加hover控制遮罩显隐的样式即可

注意事项 #

• 若MediaCard本身设置了z-index属性，需要把遮罩的z-index调整为比MediaCard的z-index更高的值
• 如果你没有使用inherit继承圆角，需要手动把遮罩的borderRadius设置为和MediaCard一致的数值

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