Joshua Comeau profundiza en cómo funcionan los componentes con estilo reconstruyendo los conceptos básicos. Un viaje divertido y útil.
styled-components parece ser el jugador más importante en el mercado de CSS-in-React. A pesar de estar en ese mundo, todavía no me ha atraído por completo. Soy un gran admirador de lo básico: estilos de ámbito mediante nombres de clases únicos. También me gusta que funcione con la recarga de módulos en caliente, ya que todo sucede en JavaScript. Pero los obtengo a través de los módulos css, y me gusta la separación de archivos y el soporte Sass que obtengo a través de los módulos css. Sin embargo, hay algunas cosas en las que estoy empezando a darme cuenta (un poco):
- Incluso con los módulos css, todavía tienes que pensar en nombres. Incluso si es como
.rooto lo que sea. Con los componentes con estilo, adjunta los estilos directamente al componente y realmente no nombra nada. - Con css-modules, está aplicando los estilos directamente a un elemento HTML solamente. Con los componentes con estilo, puede aplicar los estilos a los componentes personalizados y luego agregará los estilos para difundir los accesorios.
- Debido a que los estilos están literalmente en los archivos JavaScript, obtienes elementos de JavaScript que puedes usar: ternaries, acceso a accesorios, matemáticas sofisticadas, etc.