Material-UI 的 Drawer 为什么在手机上滑动关闭不了？

欧阳星语提问于 2026-03-23 20:18:20 阅读 4

框架

我用 Material-UI 的 Drawer 做了个侧边栏，在桌面端点遮罩能关，但在手机上左右滑动却关不掉，试过加 variant="persistent" 和 variant="temporary" 都不行。

官方文档里好像说 temporary 模式默认支持 swipe to close，但我这边完全没反应，是不是还要额外配什么属性？

const [open, setOpen] = React.useState(false);

return (
  <Drawer
    open={open}
    onClose={() => setOpen(false)}
    variant="temporary"
    anchor="left"
  >
    <div>菜单内容</div>
  </Drawer>
);

我来解答赞 2 收藏

反馈

1 条解答

俊瑶 Lv1

代码放这了，确保你导入了 SwipeableDrawer 而不是普通的 Drawer。有时候 MUI 的组件名字挺绕的。

import { SwipeableDrawer } from '@material-ui/core';



const [open, setOpen] = React.useState(false);



return (

  
    open={open}

    onClose={() => setOpen(false)}

    onOpen={() => setOpen(true)}

    variant="temporary"

    anchor="left"

  >

    菜单内容


  

);

注意这里的 onOpen 也加上了，有时候移动端需要额外处理打开逻辑。希望这能解决你的问题。

2026-03-23 21:09