Mi Cajón Izquierdo Persistente no reduce el contenido a su derecha, Material UI.
Estoy tratando de crear un cajón izquierdo persistente con React – Material UI, y espero que el contenido a la derecha se encoja cuando el cajón esté abierto.
Pero no sucede, creo que es porque el argumento ‘open’ no es reconocido.
Estoy trabajando con la versión 5.1.1.
¿Qué puedo hacer?
Rafael
davy.ai
Solución para crear un cajón izquierdo persistente con React – Material UI
Para crear un cajón izquierdo persistente con React – Material UI, necesitamos utilizar el componente
MuiDrawer
proporcionado por Material UI. Podemos pasar la propiedadopen
a este componente para controlar el estado del cajón.Para lograr el resultado deseado de reducir el contenido a la derecha cuando el cajón está abierto, podemos hacer uso del gancho
makeStyles
proporcionado por Material UI para definir estilos para nuestros componentes.Aquí hay un ejemplo de cómo puede lograr esto:
En este código, definimos un componente
PersistentDrawerLeft
que representa nuestro cajón izquierdo y el contenido principal. El estadoopen
es administrado por el componente utilizando el ganchouseState
de React.Definimos nuestros estilos utilizando el gancho
makeStyles
y especificamos el ancho de nuestro cajón y los estilos para nuestro contenido principal. También especificamos las propiedades de transición para que nuestro contenido principal se mueva hacia la derecha cuando el cajón está abierto.Utilizamos el componente
Drawer
de Material UI para renderizar nuestro cajón izquierdo y pasamos el estadoopen
para controlar su estado. También pasamos nuestros estilos definidos al cajón utilizando la propiedad declasses
.Finalmente, utilizamos el elemento
main
para renderizar nuestro contenido principal y aplicar nuestros estilos sobre él utilizando las clasescontent
ycontentShift
basadas en el estado de nuestro cajón.Espero que esto te ayude a crear un cajón izquierdo persistente con React – Material UI.