Migrando de Material-UI a MUI: consejos, trampas y buenas prácticas

Hoy en día el conocido @material-ui es un paquete legacy, y todos sus componentes fueron migrados al nuevo paquete @mui. El anterior ya no es mantenible, y los componentes nuevos solo aparecen en @mui. Entonces, es una pregunta razonable para todos: ¿Cómo migrar al nuevo paquete? ¡Tengo una respuesta! Por supuesto, mis pensamientos eran que el proceso no debería ser tan complejo, porque esto es rutina para miles de desarrolladores. Además, mui-t.png) y aquí. Funcionan bien si los sigues, pero en el caso en que uses seguido construcciones como makeStyles/withStyles por todo tu proyecto y uses un tema comercial redefinido (como minimal.cc en mi caso), puede que encuentres algunas dificultades. Esa es mi historia a continuación...

makeStyles ya no está disponible

En pocas palabras, los desarrolladores decidieron usar la librería styled como base, y marcaron los sistemas anteriores con classes y makeStyles como legacy. Por supuesto, este método tiene muchas ventajas, pero si tienes muchos usos de código legacy, necesitas hacerlos funcionar, al menos.

Gracias al equipo de desarrolladores, dejaron una vía de escape para usar lo legacy. El paquete @mui/styles debería ayudar. La trampa más grande es que la definición de makeStyles sigue disponible en @mui/material, pero devuelve una especie de basura con tipo never y se parece más a un stub. Aquí unas imágenes de lo que quiero decir: ### ## Tu bro makeStyles

No tu bro @mui/material/styles.makeStyles, devolviendo never

Entonces, en los componentes deberías usar makeStyles solo desde @mui/styles después de la migración, ¡esta es la regla! ### ### Conectando las sobrescrituras de tema para material

La guía sobre cómo redefinir componentes de material está disponible aquí y es muy simple. Pero, claro, con lo legacy no es tan simple como en el caso usando styled. Como decían las respuestas que googleé, debería simplemente reemplazar algunas construcciones básicas con adjuntos de sobrescritura de tema como este:

Y usarlo así:

Y, como recuerdas, en los componentes debería usar solo makeStyles de @mui/styles. Y ahí está el problema—parece que esos paquetes no están sincronizados, y en este caso obtengo componentes con sobrescrituras de estilos a nivel de tema (con createTheme), pero en makeStyles obtengo theme como un objeto vacío, y no puedo usar ninguna utilidad o patrón ni nada:

Y obtengo excepciones no cacheadas y un proyecto que no funciona en absoluto. Y eso me pone triste. Pero tenemos la posibilidad de importar ThemeProvider también desde @mui/styles, y en este caso obtengo la variable theme correcta con todo lo que necesito en withStyles del componente, pero, desafortunadamente, perdí todas mis sobrescrituras de temas básicas:

Botón por defecto sin ningún estilo, lo que indica que perdí todas las sobrescrituras de tema :(

Pero mira lo que obtuve en cambio :)

Final

Entonces, la única decisión que encontré es usar ambos ThemeProvider así:

Todo funciona bien, en el futuro, puedes usar ambos métodos de decoración de componentes, pero preferiría usar styled como el común. Y, por supuesto, después de todas estas manipulaciones puedes eliminar el paquete desactualizado @material-ui de tu proyecto. Eres increíble :)