Styled components para React

Autor: | Última modificación: 8 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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 React. Así, podrás empezar a estilizar tus propias aplicaciones de manera compleja.

¿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 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 style 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.

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 components:

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 React, sino que usamos el guion para separar las palabras (border-radius).

La ventaja de escribir propiedades de estilo con styled components 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, 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, 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!