Գլոբալ CSS-ի օգտագործումը React-ում ոճավորելիս

Ենթադրենք, ունենք React կոմպոնենտ App, որի մեջ կա div, իսկ նրա ներսում երեք պարբերություն (paragraph).

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

Եկեք ոճավորենք այս կոմպոնենտը: Դրա համար մեր կոմպոնենտի գտնվող src պանակում կստեղծենք սովորական CSS ֆայլ styles.css անվանումով մեր տարրերի համար:

Այս ֆայլում div-ի համար կստեղծենք class1 դաս հետևյալ ոճերով.

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Այժմ ավելացնենք class2 դասը առաջին պարբերության համար.

.class2 {
	color: orangered;
	font-weight: bold;
}

class3 դասը երկրորդ պարբերության համար.

.class3 {
	font-style: italic;
	color: brown;
}

Եվ, վերջապես, կստեղծենք class4 դասը վերջին պարբերության համար.

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

CSS ֆայլի հետ ավարտեցինք: Մնաց կիրառել մեր գրած CSS ոճերը տարրերի վրա: Վերադառնանք մեր App.js ֆայլին կոմպոնենտով:

Առաջինը, ինչ պարտադիր պետք է անենք - ֆայլի սկզբում ավելացնել մեր ոճերի ֆայլի styles.css իմպորտի տող.

import './styles.css';

Այժմ, որպեսզի կոմպոնենտում կիրառենք CSS դասերը ֆայլից, կօգտագործենք class ատրիբուտը: Առաջին պարբերության համար ունեինք class2 դաս, եկեք կիրառենք այն.

<p class="class2">text</p>

Նույն կերպ ավելացնենք դասերը մնացած տարրերի համար: Արդյունքում կստանանք հետևյալ կոդը.

<div class="class1">
	<p class="class2">text</p>
	<p class="class3">text</p>
	<p class="class4">text</p>
</div>

Ստեղծեք React կոմպոնենտ, որն կպարունակի div, իսկ div-ի մեջ կլինեն երկու կոճակ (button): Ստեղծեք styles.css ֆայլը ձեր տարրերի CSS ոճերով: Կիրառեք կոմպոնենտի տարրերի վրա գրված ոճերը: