Reactda Styled Components yordamida stil berish

Oldingi darslarda biz global CSS va inline usullari yordamida stil berishni ko'rib chiqdik. Ushbu darsda biz katta ilovalar uchun samaraliroq bo'lgan styled-components kutubxonasidan foydalanishni o'rganamiz.

Shunday qilib, oldingi darslarda foydalangan CSS stylesiz komponentimizni olaylik:

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

Boshlash uchun avval Styled Components kutubxonasini o'rnatamiz:

npm install --save styled-components

Keyin kerakli paketni App komponentiga import qilamiz:

import styled from 'styled-components';

Endi biz teglarni stillarga o'rab, ularni React komponentlari sifatida ishlatishimiz mumkin, lekin bu safar ular JS ichida bevosita biriktirilgan stillarga ega. Bu usul CSS in JS deb ham ataladi.

Keling, birinchi abzatsga stil beraylik. Buning uchun App funksiyasidan oldin, import qatorlaridan keyin Text1 komponentini yaratamiz. Kutubxonadan olgan styled obyektida bizga abzats kerak, shuning uchun styled.p deb yozamiz. Keyin, shablonli satrda kerakli CSS stillarini ro'yxatlaymiz - oddiy CSSdagidek:

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

Ko'rib turganingizdek, biz bu erda oddiy CSS ni shablonli satrlar ko'rinishida ishlatmoqdamiz, bu juda qulay. Xuddi shu tarzda biz media so'rovlar, psevdoelementlar, selektorlar va CSS ning boshqa funksionalligidan foydalanishimiz mumkin.

Endi App komponent funksiyasi ichida p tegini biz yaratgan Text1 komponenti bilan almashtiramiz:

<Text1>text</Text1>

Xuddi shu tarzda ikkinchi va uchinchi abzatslarga ham stil beramiz. Buning uchun Text2 va Text3 komponentlarini yaratamiz:

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

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

Nihoyat, div imizga stil beramiz. Buning uchun komponent yaratamiz va unga Container deb nom beramiz:

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

Barcha teglarni yaratilgan komponentlar bilan almashtiramiz:

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

Bu usul yordamida qayta-qayta ishlatish mumkin bo'lgan stillangan komponentlarni yaratish mumkin.

Agar siz yaratilgan verstkani brauzerning ishlab chiqaruvchi panelida ochsangiz, har bir komponentning o'ziga xos sinflari yaratilganligini ko'rasiz. Shunday qilib, endi biz alohida komponentlarning sinflari o'rtasidagi ziddiyatlar haqida qayg'urishimiz shart emas.

Xuddi shu tarzda komponentlarga stil berish mumkin, misol uchun, Emotion kutubxonasidan foydalangan holda.

Oldingi darsdagi vazifa uchun yaratgan React komponentingizni oling va unga Styled Components kutubxonasi yordamida stil bering.