Stilizarea cu Styled Components în React

În lecțiile anterioare am analizat tehnicile de stilizare folosind CSS global și stilizarea inline. În această lecție vom lucra cu o abordare mai eficientă pentru aplicațiile mari - utilizarea bibliotecii styled-components.

Deci, să luăm componenta noastră fără stiluri CSS, pe care am folosit-o în lecțiile anterioare:

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

Pentru început, să instalăm biblioteca Styled Components:

npm install --save styled-components

Apoi importăm pachetul necesar în componenta App:

import styled from 'styled-components';

Acum putem împacheta etichetele în stiluri și să le aplicăm ca componente React, dar deja cu stiluri atașate direct în JS. Această abordare se mai numește CSS în JS.

Hai să stilizăm primul paragraf. Pentru aceasta înainte de funcția App după liniile de import creăm componenta Text1. În obiectul styled din bibliotecă avem nevoie de un paragraf, deci scriem styled.p. Apoi, în șirul șablon enumerăm stilurile CSS necesare - ca în CSS obișnuit:

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

După cum vedeți, folosim aici CSS pur sub formă de șiruri șablon, ceea ce este foarte convenabil. În mod similar putem folosi interogări media, pseudo-elemente, selectori și alte funcționalități CSS.

Acum în interiorul funcției componentei App înlocuim eticheta p cu componenta creată de noi Text1 cu stiluri CSS:

<Text1>text</Text1>

În mod similar stilizăm al doilea și al treilea paragraf. Pentru aceasta creăm componentele Text2 și Text3:

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

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

Și, în final, stilizăm div-ul nostru. Pentru aceasta creăm o componentă și o numim Container:

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

Înlocuim toate etichetele noastre cu componentele create:

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>
	);
}

Datorită acestei abordări se pot crea componente reutilizabile cu stiluri.

Dacă deschideți marcajul generat în panela de dezvoltator din browser, veți vedea că fiecare componentă are generate propriile clase unice. Astfel, nu mai trebuie să ne îngrijorăm de conflictele dintre clasele componentelor separate.

În mod similar se pot stiliza componente, folosind, de exemplu, biblioteca Emotion.

Luați componenta React pe care ați făcut-o în sarcina din lecția anterioară, stilizați-o, folosind biblioteca Styled Components.