Estilização com Styled Components no React

Nas lições anteriores, examinamos técnicas de estilização usando CSS global e estilização inline. Nesta lição, trabalharemos com uma abordagem mais eficaz para aplicações grandes - o uso da biblioteca styled-components.

Então, vamos pegar nosso componente sem estilos CSS, que usamos nas lições passadas:

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

Para começar, vamos instalar a biblioteca Styled Components:

npm install --save styled-components

Em seguida, importamos o pacote necessário no componente App:

import styled from 'styled-components';

Agora podemos envolver tags em estilos e aplicá-las como componentes React, mas já com estilos anexados diretamente no JS. Essa abordagem também é chamada de CSS-in-JS.

Vamos estilizar o primeiro parágrafo. Para isso, antes da função App, após as linhas de importação, criaremos um componente Text1. No objeto styled da biblioteca, precisamos de um parágrafo, então escrevemos styled.p. Em seguida, na string template, listamos os estilos CSS necessários - como no CSS comum:

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

Como você pode ver, usamos aqui CSS puro na forma de strings template, o que é muito conveniente. De maneira similar, podemos usar media queries, pseudo-elementos, seletores e outra funcionalidade do CSS.

Agora, dentro da função do componente App, substituímos a tag p pelo componente que criamos Text1 com estilos CSS:

<Text1>texto</Text1>

De maneira similar, vamos estilizar o segundo e o terceiro parágrafos. Para isso, criaremos os componentes Text2 e Text3:

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

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

E, finalmente, vamos estilizar nosso div. Para isso, criaremos um componente e o chamaremos de Container:

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

Substituímos todas as nossas tags pelos componentes criados:

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>texto</Text1>
			<Text2>texto</Text2>
			<Text3>texto</Text3>
		</Container>
	);
}

Graças a essa abordagem, é possível criar componentes reutilizáveis com estilos.

Se você abrir a marcação gerada no painel do desenvolvedor no navegador, verá que cada componente tem suas próprias classes únicas geradas. Assim, não precisamos mais nos preocupar com conflitos entre classes de componentes individuais.

De maneira similar, você pode estilizar componentes, usando, por exemplo, a biblioteca Emotion.

Pegue o componente React que você fez na tarefa da lição passada, estilize-o usando a biblioteca Styled Components.