Styled components para React es una de las muchas formas en las que podemos insertar estilos a una aplicación creada con esta librería de JavaScript. A diferencia de otros métodos, esta herramienta nos permite unir por completo el poder del código CSS con el de JavaScript. Por ello, en este post, te enseñaremos qué es y cómo funciona styled components para style en React. Así, podrás empezar a estilizar tus propias aplicaciones de manera compleja con styled de components React.
¿Qué es styled components para React?
En React, podemos estilizar de muchas maneras. Podemos cargar CSS desde un componente React, usar CSS Modules, aplicar la etiqueta style o usar una librería de estilos.
Styled components para React es una librería que nos permite estilizar nuestras aplicaciones. Esta herramienta utiliza la lógica de crear objetos de estilo para insertarlos de manera inline usando la etiqueta style en React. Sin embargo, este proceso de style en React se enmascara en librerías para que parezca que estamos escribiendo CSS de verdad. El problema de pasar objetos de estilo inline mediante el atributo styled React es que, de cierta manera, estamos contaminando nuestro código de estilo. Esto puede llegar a ser una desventaja si queremos tener un código más ordenado y clasificado con styled.
Para ponerle remedio, existen opciones conocidas como CSS-in-JS. Estas soluciones nos permiten simular que estamos aplicando CSS, pero en realidad lo estamos haciendo desde JavaScript. Para automatizar este proceso, existen muchas herramientas en el ecosistema, como pueden ser Aphrodite, Radium, react-jss y Emotion. En este post, te presentaremos cómo funciona styled components para React, la librería más conocida y utilizada para aplicar CSS-in-JS.
¿Cómo funciona styled components para React?
Styled components para React nos permite aplicar CSS con template literals. Esto quiere decir que nos permite crear componentes mediante código JavaScript que llevan estilo escrito desde JavaScript, pero que parece código CSS. A continuación, te mostramos las líneas de código de un botón diseñado utilizando styled React components de style en React:
const Button = styled.button’
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
border 2px solid white;
${props => props.primary && css’
background: white;
color: black;
‘}
‘;
Como puedes ver en las líneas de código anteriores, las propiedades de estilo creadas con styled components parecen ser código CSS. En ellas, no utilizamos la nomenclatura camelCase que normalmente se utiliza en el estilo inline de styled React, sino que usamos el guion para separar las palabras (border-radius).
La ventaja de escribir propiedades de estilo con styled components de components React es que podemos mezclar un código CSS al 99% con la lógica de JavaScript. Como puedes ver en el botón de ejemplo de styled, podemos utilizar sintaxis de JavaScript como arrow functions, operadores booleanos y llamadas. Esto es algo que sería imposible en un fichero CSS, en donde no podemos insertar nada de lógica en nuestras propiedades.
¿Cómo usar styled components para React?
Lo primero que debemos hacer para usar styled components para React es instalar esta librería en nuestro editor de código. Para ello, puedes dirigirte a la página oficial de styled components e ir a la sección de documentación. Allí, encontrarás un menú con varias opciones, dirígete a la pestaña de basics y a installation.
En este artículo de styled de components React, encontrarás el código del paquete npm con el que puedes instalar la librería. Entonces, puedes copiar el siguiente código en tu terminal y darle a enter:
npm install –save styled-components
Una vez instalada, puedes ejecutar muchísimas acciones en esta librería. Por ello, te invitamos a jugar con sus posibilidades y revisar la documentación oficial en su página web. Si quieres un tutorial a modo de ejemplo de lo que puedes hacer con esta librería, te invitamos a leer nuestro post sobre estilizar botones con styled components.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona styled components para React, ¡es el momento de usar esta herramienta para estilizar tus aplicaciones web! Si quieres aprender más sobre la creación de proyectos de programación de este tipo, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás a dominar lenguajes como JavaScript, JSX, CSS y HTML para desarrollar todo tipo de proyectos. ¿A qué esperas para empezar? ¡Inscríbete ya!
