在MUI React中如何实现Avatar头像超出Drawer侧边栏边框显示

解决方案 #

你只需要调整两处样式即可实现目标效果，修改后的代码如下：

1. 修改Drawer样式

给MuiDrawer-paper新增两个属性：

• overflow: visible：取消抽屉默认的溢出内容裁剪规则，允许子元素超出抽屉边框显示
• position: relative：作为Avatar绝对定位的参照容器

<Drawer
  sx={{
    width: drawerWidth,
    flexShrink: 0,
    "& .MuiDrawer-paper": {
      width: drawerWidth,
      boxSizing: "border-box",
      overflow: "visible", // 新增
      position: "relative" // 新增
    }
  }}
  variant="persistent"
  anchor="left"
  open={open}
>

2. 修改Avatar样式

改用绝对定位，通过负的right值让半个头像超出抽屉右侧边框：

<Avatar
  alt="test"
  src="./test.jpg"
  sx={{
    position: "absolute", // 启用绝对定位
    width: "120px",
    height: "120px",
    right: "-60px", // 宽度的一半，刚好让右半部分透出抽屉外
    top: "24px" // 可自行调整垂直数值，放到你需要的头部位置
  }}
/>

补充适配（抽屉内容需要滚动的场景）

如果抽屉内容较多需要滚动，不要直接给MuiDrawer-paper改回overflow: auto，可以把抽屉内除Avatar外的所有内容包裹在一个Box组件中单独设置滚动规则：

<Drawer /* 上述Drawer配置不变 */>
  <Avatar /* 上述Avatar配置不变 */ />
  <Box
    sx={{
      height: "100%",
      overflowY: "auto",
      paddingTop: "160px" // 预留顶部空间避免内容和头像重叠，数值可自行调整
    }}
  >
    {/* 原有抽屉的所有内容放到此处 */}
  </Box>
</Drawer>

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