MUI 5 Drawer展开图标绝对定位后无法显示问题求助

问题核心是MUI Drawer的Paper组件默认设置了overflow: hidden，导致内部绝对定位的元素被裁剪，仅设置z-index无法突破这个限制。以下是两种可行解决方案：

方案一：将按钮移出Drawer组件（推荐） #

把控制按钮放在Drawer同级容器中，避免被Drawer的overflow属性裁剪，同时通过绝对定位调整位置：

<div style={{ position: 'relative' }}>
  <Drawer
    variant="permanent"
    open={open}
    PaperProps={{
      sx: {
        backgroundColor: '#005248',
      },
    }}
  >
    {/* 原Drawer内部内容（移除按钮部分） */}
    <Grid
      container
      alignItems="center"
      justifyContent="center"
    >
      <Grid item className="mb-16 ">
        <img src={Logo} alt="" className="h-10" />
      </Grid>

      <Grid item container>
        <StyledList className="w-full mr-6">
          {MENU_OPTIONS.filter(
            (opt) => !MENU_FILTER.includes(opt.value)
          ).map((item, index) => (
            <ListItem
              key={item.label}
              disablePadding
              sx={{
                display: 'block',
                borderLeft: selected === index ? 1 : 0,
                borderColor: selected === index ? '#ffffff' : '',
              }}
              onClick={() => handleRouteChange(index)}
            >
              <ListItemButton
                sx={{
                  minHeight: 48,
                  justifyContent: open ? 'initial' : 'center',
                  px: 2.5,
                  py: 0,
                  backgroundColor: selected === index ? '#242424' : '',
                }}
                className="rounded-lg rounded-l-none mb-2"
              >
                <ListItemIcon
                  sx={{
                    minWidth: 0,
                    mr: open ? 3 : 'auto',
                    justifyContent: 'center',
                  }}
                >
                  <SvgIcon sx={{ mt: 1.4, mx: 'auto' }}>
                    {item.icon()}
                  </SvgIcon>
                </ListItemIcon>
                <ListItemText
                  className="text-white"
                  primary={item.label}
                  sx={{ opacity: open ? 1 : 0 }}
                />
              </ListItemButton>
            </ListItem>
          ))}
        </StyledList>
      </Grid>
    </Grid>
  </Drawer>

  {/* 控制按钮放在Drawer外部 */}
  <IconButton
    color="inherit"
    aria-label="open drawer"
    className="p-1"
    onClick={handleDrawerOpen}
    sx={{
      position: 'absolute',
      top: '96px', // 对应原代码的top-24（Tailwind的top-24=6rem=96px）
      right: open ? '-20px' : '10px', // 根据抽屉状态调整位置
      '&:hover': { backgroundColor: theme.palette.secondary.main },
      backgroundColor: theme.palette.secondary.main,
      display: open ? 'none' : 'block',
      zIndex: 1300, // 高于Drawer默认的z-index(1200)
    }}
  >
    <ChevronRightIcon className="text-sm" />
  </IconButton>
  <IconButton
    color="inherit"
    aria-label="close drawer"
    className="p-1"
    onClick={handleDrawerClose}
    sx={{
      position: 'absolute',
      top: '96px',
      right: open ? '-20px' : '10px',
      '&:hover': { backgroundColor: theme.palette.secondary.main },
      backgroundColor: theme.palette.secondary.main,
      display: open ? 'block' : 'none',
      zIndex: 1300,
    }}
  >
    <ChevronLeftIcon className="text-sm" />
  </IconButton>
</div>

方案二：修改Drawer的Paper属性（不推荐，可能引发其他溢出问题） #

如果一定要将按钮放在Drawer内部，需要修改Paper的overflow属性为visible，同时确保按钮层级足够：

<Drawer
  variant="permanent"
  open={open}
  PaperProps={{
    sx: {
      backgroundColor: '#005248',
      overflow: 'visible', // 移除默认的overflow:hidden
      position: 'relative', // 确保按钮相对于Drawer定位
    },
  }}
>
  <Grid
    item
    container
    justifyContent="center"
    alignItems="center"
    className="h-5 my-6 relative"
  >
    <Grid
      item
      xs={12}
      position={'absolute'}
      className={`top-24 -right-14`}
      sx={{ zIndex: 1300 }} // 确保按钮层级高于Drawer
    >
      <IconButton
        color="inherit"
        aria-label="open drawer"
        className="p-1"
        onClick={handleDrawerOpen}
        sx={{
          '&:hover': { backgroundColor: theme.palette.secondary.main },
          marginRight: 5,
          backgroundColor: theme.palette.secondary.main,
          ...(open && { display: 'none' }),
        }}
      >
        <ChevronRightIcon className="text-sm" />
      </IconButton>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        className="p-1"
        onClick={handleDrawerClose}
        sx={{
          '&:hover': { backgroundColor: theme.palette.secondary.main },
          marginRight: 5,
          backgroundColor: theme.palette.secondary.main,
          ...(!open && { display: 'none' }),
        }}
      >
        <ChevronLeftIcon className="text-sm" />
      </IconButton>
    </Grid>
  </Grid>
  
  {/* 原Drawer内部其他内容不变 */}
</Drawer>

注意事项 #

• 方案一不会影响Drawer内部的overflow行为，更适合菜单内容可能过长的场景；
• 方案二修改overflow: visible后，Drawer内部超出高度的内容会直接溢出，需要额外处理滚动逻辑。

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