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

欧阳星语 阅读 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