Stylování pomocí Styled Components v Reactu

V předchozích lekcích jsme si ukázali techniky stylování pomocí globálního CSS a inline stylování. V této lekci budeme pracovat s přístupem efektivnějším pro velké aplikace - použitím knihovny styled-components.

Vezměme si tedy náš komponent bez CSS stylů, který jsme používali v minulých lekcích:

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

Nejprve nainstalujeme knihovnu Styled Components:

npm install --save styled-components

Poté importujeme potřebný balíček do komponentu App:

import styled from 'styled-components';

Nyní můžeme obalovat tagy do stylů a používat je jako React komponenty, ale už s připojenými styly přímo v JS. Tento přístup se také nazývá CSS v JS.

Pojďme nastylovat první odstavec. K tomu před funkcí App po řádcích importu vytvoříme komponent Text1. V objektu styled z knihovny potřebujeme odstavec, proto píšeme styled.p. Poté v šablonovém řetězci vypíšeme potřebné CSS styly - jako v běžném CSS:

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

Jak vidíte, zde používáme čisté CSS ve formě šablonových řetězců, což je velmi pohodlné. Podobným způsobem můžeme používat media query, pseudoprvky, selektory a další funkcionalitu CSS.

Nyní uvnitř funkce komponentu App nahradíme tag p naším vytvořeným komponentem Text1 s CSS styly:

<Text1>text</Text1>

Podobným způsobem nastylujeme druhý a třetí odstavec. K tomu vytvoříme komponenty Text2 a Text3:

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

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

A nakonec nastylujeme náš div. K tomu vytvoříme komponent a pojmenujeme jej Container:

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

Nahradíme všechny naše tagy vytvořenými komponenty:

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

Díky tomuto přístupu lze vytvářet znovupoužitelné komponenty se styly.

Pokud otevřete vygenerované rozložení v panelu vývojáře v prohlížeči, uvidíte, že každý komponent má vygenerované své unikátní třídy. Takže se už nemusíme starat o konflikty mezi třídami jednotlivých komponentů.

Podobným způsobem lze stylovat komponenty, s použitím, například, knihovny Emotion.

Vezměte React komponent, který jste dělali v úloze k minulé lekci, a nastylujte jej s použitím knihovny Styled Components.