MUI SwipeableDrawer设置hideBackdrop={true}后点击外部无法关闭

问题本质是：默认的背景遮罩（backdrop）不仅负责显示阴影，还承担了监听外部点击以关闭抽屉的功能。设置hideBackdrop={true}会直接移除这个遮罩元素，自然就失去了点击关闭的触发区域。

给你两个实用的解决方案：

方案一：修改默认遮罩样式为透明（推荐） #

不用隐藏遮罩，直接把它改成透明的，既保留点击关闭功能，又看不到阴影：

<SwipeableDrawer
  disableEnforceFocus={disableAutoFocus}
  disableAutoFocus={disableAutoFocus}
  anchor="bottom"
  open={isOpen}
  onClose={onClose}
  onOpen={onOpen}
  // 移除hideBackdrop，改用BackdropProps自定义样式
  BackdropProps={{
    sx: {
      backgroundColor: 'transparent', // 让遮罩完全透明
    }
  }}
>
  <Box 
    role="presentation"
    onClick={(e) => e.stopPropagation()} {/* 阻止抽屉内部点击触发关闭 */}
  >
    {children}
  </Box>
</SwipeableDrawer>

方案二：手动添加透明遮罩层 #

如果确实需要隐藏默认遮罩，可以自己加一个全屏透明层来监听外部点击：

<Box position="relative">
  <SwipeableDrawer
    disableEnforceFocus={disableAutoFocus}
    disableAutoFocus={disableAutoFocus}
    anchor="bottom"
    open={isOpen}
    onClose={onClose}
    onOpen={onOpen}
    hideBackdrop={hideBackdrop}
  >
    <Box 
      role="presentation"
      onClick={(e) => e.stopPropagation()}
    >
      {children}
    </Box>
  </SwipeableDrawer>

  {/* 自定义透明遮罩，仅当抽屉打开时显示 */}
  {isOpen && (
    <Box
      position="fixed"
      top={0}
      left={0}
      right={0}
      bottom={0}
      zIndex={1200} {/* 层级要比地图高，比抽屉默认的1300低 */}
      onClick={onClose}
      sx={{ backgroundColor: 'transparent' }}
    />
  )}
</Box>

注意：两种方案都要给抽屉内部的容器加onClick={(e) => e.stopPropagation()}，避免点击抽屉内部时触发关闭逻辑。

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