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 в JS деб ҳам аталади.

Биринчи абзацни стиллаймиз. Бунинг учун App функциясидан олдин, импорт сатрларидан кейин Text1 компонентини яратамиз. styled объектидан бизга абзац керак, шунинг учун биз styled.p деб ёзамиз. Сўнгра, шаблонли сатр ичида зарур бўлган CSS стилларни келтирамиз - оддий CSSдаги каби:

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

Кўриб турганingizдек, биз бу ерда шаблонли сатрлар шаклидаги тоза CSSдан фойдаланамиз, бу жуда қулай. Шунинг ўхшаш биз медиа-сўровлар, судёэлементлар, селекторлар ва CSSнинг бошқа функционалидан фойдаланишимиз мумкин.

Энди App компоненти функцияси ичида p тегини биз яратган компонент Text1 билан алмаштирамиз:

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

Бундай ёндашув ёрдамида стиллар билан қайта-қайта ишлатиладиган компонентлар яратиш мумкин.

Агар сиз браузерда ишлаб чиқарувчи панелида яратилган версткани ochsangiz, у ҳолда ҳар бир компонентнинг ўзига хос уникал синфлар яратилганини кўрасиз. Шу тариқа, бизга ҳар бир компонентнинг синфлари ўртасидаги конфликтлар ҳақида қайғуриш шарт эмас.

Шунинг ўхшаш компонентларни стиллаш мумкин, масалан, Emotion библиотекасини қўллаган ҳолда.

Олдинги дарс учун вазифада қилган React компонентингизни олинг, уни стиллашда Styled Components библиотекасидан фойдаланинг.