React'те Styled Components аркылуу стилдөө

Алдыңкы сабактарда биз жалпы CSS жана инлайн стилдөөнү колдонуу менен стилдөө ыкмаларын карап чыктык. Бул сабакта биз чоң колдонмолор үчүн натыйжалуураак ыкма менен иштейбиз - бул styled-components китепканасын колдонуу.

Ошентип, биз мурунку сабактарда колдонгон, CSS стилдери жок компонентибизди алалы:

function App() {
	return (
		<div>
			<p>текст</p>
			<p>текст</p>
			<p>текст</p>
		</div>
	);
}

Баштоо үчүн, биз Styled Components китепканасын орнотобуз:

npm install --save styled-components

Андан кийин, бизге керектүү пакетти App компонентине импорттойбуз:

import styled from 'styled-components';

Эми биз тегдерди стилдерге ороп, аларды React компоненттери катары колдонсо болот, бирок азыр аларга JS ичинде эле туташтырылган стилдер бар. Бул ыкманы JS ичиндеги CSS деп да аташат.

Биринчи абзацты стилдейли. Бул үчүн App функциясынын алдында, импорт саптарынан кийин Text1 компонентин түзөбүз. Китепканадан алынган styled объектисинен бизге абзац керек, ошондуктан биз styled.p деп жазабыз. Андан кийин, шаблондук сапта бизге керектүү CSS стилдерин тизмелейбиз - кадимки CSS сыяктуу:

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

Көрүп тургандарыңардай, биз бул жерде таза CSS'ти шаблондук саптар түрүндө колдонуп жатабыз, бул абдан ыңгайлуу. Ошол сыяктуу эле биз медиа-суроолорду, жасалма элементтерди, тандоочуларды жана CSS'тин башка функционалдарын колдоно алабыз.

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

<Text1>текст</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>текст</Text1>
			<Text2>текст</Text2>
			<Text3>текст</Text3>
		</Container>
	);
}

Бул ыкманын аркасында биз көп жолу колдонулуучу стилдери бар компоненттерди түзө алабыз.

Эгер сиз браузердеги иштеп чыгуучу панелде түзүлгөн верстканы ачсаңыз, анда сиз ар бир компоненттин өзүнүн уникалдуу класстары түзүлгөнүн көрөсүз. Ошентип, бизге ар бир компоненттин класстарынын ортосундагы конфликттер жөнүндө көбүрөөк ойлонуунун кажети жок.

Ошол сыяктуу эле компоненттерди стилдөөгө болот, мисалы, Emotion китепканасын колдонуп.

Өткөн сабактагы тапшырмада жасаган React компонентиңизди алыңыз, аны стилдеңиз, колдонуп Styled Components китепканасын.