Stilizacija pomoću Styled Components u Reactu

U prethodnim lekcijama smo razmotrili tehnike stilizacije korišćenjem globalnog CSS-a i inlajn stilizacije. U ovoj lekciji ćemo raditi sa pristupom koji je efikasniji za velike aplikacije - korišćenjem biblioteke styled-components.

Dakle, uzmimo našu komponentu bez CSS stilova, koju smo koristili u prethodnim lekcijama:

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

Za početak, instalirajmo biblioteku Styled Components:

npm install --save styled-components

Zatim, importujmo neophodni paket u komponentu App:

import styled from 'styled-components';

Sada možemo da oblažimo tagove u stilove i primenjujemo ih kao React komponente, ali već sa stilovima prikačenim direktno u JS-u. Ovaj pristup se još naziva CSS u JS-u.

Hajde da stilizujemo prvi pasus. Za ovo pre funkcije App, posle linija importa kreiramo komponentu Text1. U objektu styled iz biblioteke potreban nam je pasus, pa pišemo styled.p. Zatim, u šablonskom stringu nabrojimo neophodne nam CSS stilove - kao u običnom CSS-u:

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

Kao što vidite, ovde koristimo čisti CSS u obliku šablonskih stringova, što je veoma zgodno. Na sličan način možemo koristiti medija upite, pseudoelemente, selektore i drugi funkcionalitet CSS-a.

Sada unutar funkcije komponente App zamenimo tag p kreiranom komponentom Text1 sa CSS stilovima:

<Text1>text</Text1>

Na sličan način stilizujmo drugi i treći pasus. Za ovo kreiramo komponente 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, konačno, stilizujmo naš div. Za ovo kreiramo komponentu i nazovimo je Container:

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

Zamenimo sve naše tagove kreiranim komponentama:

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

Zahvaljujući ovom pristupu možemo kreirati višekratno upotrebljive komponente sa stilovima.

Ako otvorite generisanu verziju u panelu programera u pretraživaču, videćete da svaka komponenta ima svoje jedinstvene klase. Tako da nam više nije potrebno brinuti o konfliktima između klasa pojedinačnih komponenti.

Na sličan način je moguće stilizovati komponente, koristeći, na primer, biblioteku Emotion.

Uzmite React komponentu koju ste radili u zadatku za prethodnu lekciju, stilizujte je, koristeći biblioteku Styled Components.