Estoy tratando de construir un cajón lateral receptivo con el componente Drawer de MUI en React. Estoy usando MUI versión 4.12.1.
En el ejemplo de mui.com , usan el accesorio sx y pasan un objeto con la pantalla configurada en algunos valores diferentes que dependen del ancho de pantalla.
Sin embargo, cuando uso este código en un archivo App.js :
<Drawer variant="permanent" sx={{ display: { xs: 'none', sm: 'none' }, }} open > Hello There </Drawer> El cajón todavía aparece. También aparece cuando simplemente configuro la display: 'none'
¿Por qué es esto? ¿Cómo puedo crear un cajón como este con algo como sx={{ display: { xs: 'none', sm: 'block' } }} que oculta el cajón en tamaños de pantalla más pequeños?
sx prop solo está disponible en MUI v5, actualice MUI a la última versión. Puedes ver la guía de instalación aquí para más detalles.
En MUI v4, esto se hace con el componente Hidden
Como dijo NearHuscarl, el accesorio sx solo está disponible en MUI v5.
Entonces, para ocultar su cajón para sm y más pequeños, probablemente quiera algo como esto:
<Hidden smDown implementation="css"> <Drawer variant="permanent" open > Hello There </Drawer> </Hidden>