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 истифода кунем, аммо аллакай бо услубҳои CSS-е, ки мустақиман дар JS замима шудаанд. Ин усулро низ CSS дар 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.