我有一個MUI-5抽屜，我想在抽屜的邊緣放置抽屜可展開按鈕。我使用css來定位圖標按鈕，但是圖標在抽屜外面是不可見的，但是在抽屜里面是可見的。我已經嘗試給IconButtons使用zIdex，但是仍然沒有結果。

抽屜密碼如下:

<Drawer
    variant="permanent"
    open={open}
    PaperProps={{
      sx: {
        backgroundColor: '#005248',
      },
    }}
    className=""
  >
    <Grid
      item
      container
      justifyContent="center"
      alignItems="center"
      className="h-5 my-6 relative"
    >
      <Grid
        item
        xs={12}
        position={'absolute'}
        className={`top-24 -right-14`}
      >
        <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>
    <Grid
      container
      alignItems="center"
      justifyContent="center"
      className=""
    >
      <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>

我已經被這個問題困擾了一段時間了，如果能得到幫助，我將不勝感激。