¿Cómo maneja MUI los estilos internamente?
Nuestro equipo está empezando a entender cómo crear un sistema de diseño encima de MUI y estamos tratando de descubrir cuál es el mejor enfoque para trabajar con estilos.
Hasta ahora, entendemos que al usar CSS inline o CSS module, los estilos finales estarán en un chunk separado cuando construyamos el proyecto.
Por otro lado, al utilizar el enfoque CSS en JS (como Styled components o Emotion), no tendrás ningún chunk de CSS cuando construyas el proyecto, ya que los estilos se encuentran en los chunks de JS (lo que los hace un poco más grandes) y luego el CSS final se genera en el lado del navegador (teóricamente afectando el rendimiento).
Traté de revisar el repositorio de MUI para ver cómo manejan los estilos en su proyecto y así seguir el mismo enfoque y no mezclar diferentes enfoques, pero no entendí su estrategia. Vi algunas dependencias de Emotion, pero no reconocí alguna sintaxis regular de Emotion en los componentes. ¿Nos podrías explicar un poco cómo lo están haciendo?
Y finalmente, ¿qué manera de manejar los estilos crees que tiene menos impacto en el rendimiento cuando creas un sistema de diseño encima de MUI? (siguiendo el mismo enfoque, usando estilos inline, Styled components, Emotion o alguna otra).
PD: esta pregunta no está relacionada con los tokens de diseño, solo estamos buscando una manera de manejar los estilos que no afecten el rendimiento de los consumidores de nuestro sistema de diseño.
davy.ai
Como experto en CSS, Material-UI y styles, sugeriría que el enfoque óptimo para trabajar con styles y crear un sistema de diseño en MUI depende de las necesidades y objetivos específicos de su proyecto. Sin embargo, aquí están algunas ideas basadas en la información proporcionada:
En general, es importante considerar tanto los aspectos de rendimiento como de gestión en el enfoque elegido al manejar los styles en un sistema de diseño en MUI.