Styling s Styled Components v Reactu

V prejšnjih lekcijah smo si ogledali tehnike stiliziranja z uporabo globalnega CSS in inline stiliziranja. V tej lekciji bomo delali z bolj učinkovitim pristopom za velike aplikacije - uporabo knjižnice styled-components.

Torej, vzemimo našo komponento brez CSS stilov, ki smo jo uporabljali v prejšnjih lekcijah:

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

Za začetek namestimo knjižnico Styled Components:

npm install --save styled-components

Nato uvozimo potreben paket v komponento App:

import styled from 'styled-components';

Zdaj lahko ovijemo oznake v style in jih uporabimo kot React komponente, vendar z stilovi, pritrjenimi direktno v JS. Ta pristop se imenuje tudi CSS v JS.

Oblikujmo prvi odstavek. Za to pred funkcijo App po uvoznih vrsticah ustvarimo komponento Text1. V objektu styled iz knjižnice potrebujemo odstavek, zato pišemo styled.p. Nato, v predlogi navedemo potrebne CSS style - kot v običajnem CSS:

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

Kot vidite, tukaj uporabljamo čist CSS v obliki predloženih nizov, kar je zelo priročno. Na podoben način lahko uporabljamo medijske poizvedbe, psevdoelemente, izbirnike in drugo funkcionalnost CSS.

Zdaj znotraj funkcije komponente App zamenjajmo oznako p z ustvarjeno komponento Text1 s CSS slogi:

<Text1>text</Text1>

Na podoben način oblikujmo drugi in tretji odstavek. Za to ustvarimo komponenti Text2 in Text3:

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

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

In končno, oblikujmo naš div. Za to ustvarimo komponento in jo poimenujmo Container:

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

Zamenjajmo vse naše oznake z ustvarjenimi komponentami:

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

Zahvaljujoč temu pristopu lahko ustvarimo večkrat uporabne komponente s slogi.

Če odprete generirano označevanje v plošči razvijalca v brskalniku, boste videli, da ima vsaka komponenta generirane svoje edinstvene razrede. Tako nam ni treba več skrbeti za konflikte med razredi posameznih komponent.

Na podoben način je mogoče stilizirati komponente, z uporabo, na primer, knjižnice Emotion.

Vzemite React komponento, ki ste jo izdelali v nalogi za prejšnjo lekcijo, jo stilizirajte z uporabo knjižnice Styled Components.