Styled Components көмегімен React-та стильдеу

Алдыңғы сабақтарда біз жаһандық CSS және инлайн стильдеуді қолдану арқылы стильдеу әдістерін қарастырдық. Бұл сабақта біз үлкен қолданбалар үшін тиімдірек тәсілмен - styled-components кітапханасын қолданумен жұмыс істейміз.

Сонымен, алдыңғы сабақтарда қолданған CSS стильдері жоқ біздің компонентті алайық:

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

Бастау үшін Styled Components кітапханасын орнатайық:

npm install --save styled-components

Содан кейін қажетті пакетті App компонентіне импорттаймыз:

import styled from 'styled-components';

Енді біз тегтерді стильдерге орап, оларды React компоненттері ретінде қолдана аламыз, бірақ JS-те тікелей қосылған стильдермен. Мұндай тәсілді CSS in JS деп те атайды.

Бірінші абзацты стильдейік. Ол үшін App функциясының алдында, импорт жолдарынан кейін Text1 компонентін жасаймыз. styled объектісінен бізге абзац керек, сондықтан біз styled.p деп жазамыз. Содан кейін, қабылдау жолында қажетті CSS стильдерін тізімдейміз - кәдімгі CSS-тегідей:

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

Көріп отырғаныңыздай, біз бұл жерде таза CSS-ті қабылдау жолдары түрінде қолданамыз, бұл өте ыңғайлы. Осы сияқты біз медиа-сұраныстарды, жалған элементтерді, селекторларды және CSS-тің басқа функционалын қолдана аламыз.

Енді App компонентінің функциясы ішінде p тегін біздің жасаған компонентіміз Text1 CSS стильдерімен ауыстырамыз:

<Text1>text</Text1>

Осы сияқты екінші және үшінші абзацтарды стильдейік. Ол үшін Text2 және Text3 компоненттерін жасаймыз:

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

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

Ақырында, біздің дивті стильдейік. Ол үшін компонент жасап, оны Container деп атаймыз:

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

Барлық тегтердімізді жасалған компоненттермен ауыстырайық:

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

Осындай тәсілдің арқасында стильдері бар қайта қолданылатын компоненттерді жасауға болады.

Егер сіз браузердегі әзірлеуші панелінде генерацияланған верстканы ашсаңыз, онда сіз әрбір компоненттің өзіндік бірегей сыныптары генерацияланғанын көресіз. Осылайша, бізге енді жеке компоненттердің сыныптары арасындағы қақтығыстар туралы алаңдаудың қажеті жоқ.

Осы сияқты компоненттерді стильдеуге болады, мысалы, Emotion кітапханасын қолдану арқылы.

Алдыңғы сабақтағы тапсырмада жасаған React компонентіңізді алыңыз, Styled Components кітапханасын қолданып оны стильдеңіз.