Estilización con Styled Components en React

En lecciones anteriores revisamos técnicas de estilización usando CSS global y estilización en línea. En esta lección, trabajaremos con un enfoque más efectivo para aplicaciones grandes - el uso de la biblioteca styled-components.

Entonces, tomemos nuestro componente sin estilos CSS, que usamos en lecciones anteriores:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Para empezar instalemos la biblioteca Styled Components:

npm install --save styled-components

Luego importemos el paquete necesario en el componente App:

import styled from 'styled-components';

Ahora podemos envolver etiquetas en estilos y aplicarlos como componentes React, pero ya con estilos adjuntos directamente en JS. Este enfoque también se denomina CSS en JS.

Vamos a estilizar el primer párrafo. Para esto antes de la función App después de las líneas de importación creemos el componente Text1. En el objeto styled de la biblioteca necesitamos un párrafo, por eso escribimos styled.p. Luego, en la cadena de plantilla enumeramos los estilos CSS necesarios - como en CSS normal:

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

Como ven, aquí usamos CSS puro en forma de cadenas de plantilla, lo que es muy conveniente. De manera similar podemos usar consultas de medios, pseudoelementos, selectores y otra funcionalidad CSS.

Ahora dentro de la función del componente App reemplacemos la etiqueta p por el componente creado por nosotros Text1 con estilos CSS:

<Text1>text</Text1>

De manera similar estilicemos el segundo y tercer párrafo. Para esto creemos los componentes Text2 y Text3:

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

Y, finalmente, estilicemos nuestro div. Para esto creemos un componente y llamémoslo Container:

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

Reemplacemos todas nuestras etiquetas por los componentes creados:

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

Gracias a este enfoque se pueden crear componentes reutilizables con estilos.

Si abres el código generado en el panel del desarrollador en el navegador, verás que cada componente tiene generadas sus propias clases únicas. De este modo, ya no necesitamos preocuparnos por conflictos entre clases de componentes individuales.

De manera similar se pueden estilizar componentes, usando, por ejemplo, la biblioteca Emotion.

Tome el componente React que hizo en la tarea de la lección anterior, estilícelo, usando la biblioteca Styled Components.