Problema enfrentado: en el código de la documentación ( https://codesandbox.io/s/cnvp4i?file=/demo.tsx ), el cajón se activa y se abre cuando se hace clic en el botón "Abrir" en la parte superior. Sin embargo, quiero que el cajón se active y se abra cuando se haga clic en el cajón. (función onClick)
Lo que probé: intenté adjuntar la función onClick a los componentes StyledBox y SwipeableDrawer ( https://codesandbox.io/s/cnvp4i?file=/demo.tsx ), pero la función onClick no se activa y no sucede nada. También intenté envolver etiquetas div dentro de las etiquetas de componentes para activar el DOM directamente como:
<SwipeableDrawer> <div onClick={toggleDrawer(true)}></div> </SwipeableDrawer>Lo que necesito: si el código de documentación ( https://codesandbox.io/s/cnvp4i?file=/demo.tsx ) se puede modificar para que el cajón se pueda activar cuando se hace clic en él directamente o un fragmento de código que funciona, Eso sería muy apreciado.
Agregar pointerEvents: "all" a <StyledBox /> capturará los eventos del usuario como onClick en este caso.
Además, no necesita un div dentro de <SwipeableDrawer /> , todo lo que necesita es pasar un accesorio onClick={toggleDrawer(!open)} para alternar el estado del cajón.