Skip to content

Swipeable Drawer to open with onClick function (material ui)

Problem faced: In the documentation’s code (, the drawer is triggered and opens when the “Open” button is clicked at the top. However, I want the drawer to be triggered and opened when the drawer is clicked instead. (onClick function)

What I’ve tried: I’ve tried attaching the onClick function to StyledBox and SwipeableDrawer components ( but the onClick function is not triggered and nothing happens. I’ve also tried enveloping div tags within the component tags to trigger the DOM directly like:

    <div onClick={toggleDrawer(true)}></div>

What I need: If the documentation code ( can be modified so the drawer can be triggered when it is clicked on directly or a code snippet that works, that would be greatly appreciated.


Adding pointerEvents: "all" to the <StyledBox /> will capture the user events such as onClick in this case.

Also, you don’t need a div inside <SwipeableDrawer />, all you need is to pass a prop onClick={toggleDrawer(!open)} to toggle the state of the drawer.

Codesandbox link