React-та элементтерді стильдеу кезінде жаһандық CSS қолдану

Бізде React компоненті App бар делік, оның ішінде div бар, ал div ішінде - үш абзац:

function App() {
	return (
		<div>
			<p>мәтін</p>
			<p>мәтін</p>
			<p>мәтін</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">мәтін</p>

Ұқсас әдіспен қалған тегтер үшін кластарды қосамыз. Нәтижеде келесі кодты аламыз:

<div class="class1">
	<p class="class2">мәтін</p>
	<p class="class3">мәтін</p>
	<p class="class4">мәтін</p>
</div>

React компонентін жасаңыз, ол iшінде div болады, ал div ішінде екі түйме болады. styles.css файлын CSS стильдерімен жасаңыз. Компонент тегтеріне жазылған стильдерді қолданыңыз.