如何在Material-UI Dialog中让图片部分超出对话框且不被裁剪

Material-UI 的 Dialog 组件默认对内部的 Paper 容器设置了 overflow: hidden 属性，所有超出 Dialog 容器边界的内容都会被裁剪，你把仙人掌 Avatar 向上定位到 Dialog 外部的部分就会被这个规则截断，这是你修改 transform 也无效的核心原因。

按以下两步修改代码即可实现效果：

1. 给 Dialog 组件添加 PaperProps 配置，关闭 Paper 容器的溢出裁剪，同时可以适当给 Dialog 添加上边距避免仙人掌超出视口顶部：

<Dialog 
  open={open} 
  onClose={close} 
  maxWidth="sm"
  PaperProps={{
    style: {
      overflow: 'visible',
      marginTop: '40px' // 可选，防止Dialog太靠上时仙人掌被浏览器窗口裁剪
    }
  }}
>

2. 调整 cactus 类的样式，让 Avatar 刚好一半露在 Dialog 上方，同时添加层级避免被其他元素覆盖：

cactus: {
  position: 'absolute',
  top: -30, // Avatar高度为60px，向上偏移一半刚好半露在外部
  left: 30,
  backgroundColor: '#fff',
  width: '60px',
  height: '60px',
  zIndex: 2 // 确保Avatar层级高于Dialog的其他内容，不会被遮挡
},

如果仙人掌图片在 Avatar 内部还有裁剪，可以给 Avatar 内部的 img 标签添加样式调整位置，比如：

<img src={Cactus} alt="cactus" height="50px" width="50px" style={{ marginTop: '4px' }} />

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