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;
`;

Եվ, վերջապես, ոճավորենք մեր div-ը: Դրա համար կստեղծենք կոմպոնենտ և կանվանենք այն 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 գրադարանը: