Stylovanie pomocou Styled Components v React

V predchádzajúcich lekciách sme preskúmali techniky stylovania pomocou globálneho CSS a inline stylovania. V tejto lekcii budeme pracovať s prístupom, ktorý je efektívnejší pre veľké aplikácie - použitím knižnice styled-components.

Takže, zoberme si náš komponent bez CSS štýlov, ktorý sme používali v predchádzajúcich lekciách:

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

Na začiatok nainštalujme knižnicu Styled Components:

npm install --save styled-components

Potom importujeme potrebný balík do komponentu App:

import styled from 'styled-components';

Teraz môžeme obaľovať tagy do štýlov a použiť ich ako React komponenty, ale už s pripojenými štýlmi priamo v JS. Tento prístup sa tiež nazýva CSS v JS.

Poďme nastylizovať prvý odsek. Na to pred funkciou App po riadkoch importov vytvoríme komponent Text1. V objekte styled z knižnice potrebujeme odsek, preto píšeme styled.p. Potom, v šablónovom reťazci vymenujeme potrebné CSS štýly - ako v obyčajnom CSS:

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

Ako vidíte, používame tu čisté CSS vo forme šablónových reťazcov, čo je veľmi pohodlné. Podobným spôsobom môžeme používať mediálne dopyty, pseudoelementy, selektory a inú funkcionalitu CSS.

Teraz vo vnútri funkcie komponentu App nahradíme tag p naším vytvoreným komponentom Text1 s CSS štýlmi:

<Text1>text</Text1>

Podobným spôsobom nastylizujeme druhý a tretí odsek. Na to vytvorí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 nakoniec, nastylizujeme náš div. Na to vytvoríme komponent a nazveme ho Container:

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

Nahradíme všetky naše tagy vytvorenými komponentmi:

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

Vďaka tomuto prístupu je možné vytvárať viackrát použiteľné komponenty so štýlmi.

Ak otvoríte vygenerovanú verziu v paneli vývojára v prehliadači, uvidíte, že každý komponent má vygenerované svoje unikátne triedy. Takže sa už nemusíme obávať konfliktov medzi triedami jednotlivých komponentov.

Podobným spôsobom je možné stylovať komponenty, použitím, napríklad, knižnice Emotion.

Vezmite React komponent, ktorý ste robili v úlohe k predchádzajúcej lekcii, nastylizujte ho, použijúc knižnicu Styled Components.