Reactда стиллашда глобал CSSдан фойдаланиш

Фарз қилайлик, бизда React компоненти App бор, унинг ичида див, дивнинг ичида эса учта абзац бор:

function App() {
	return (
		<div>
			<p>матн</p>
			<p>матн</p>
			<p>матн</p>
		</div>
	);
}

Келинг, бу компонентни стиллаймиз. Бунинг учун, бизнинг компонентимиз жойлашган src папкасининг ўзида тегларимиз учун оддий CSS файли styles.css яратамиз.

Бу файлда див учун 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 атрибутидан foydalanamiz. Биринчи абзац учун бизда class2 класси бор эди, уни қўллаймиз:

<p class="class2">матн</p>

Худди шу тарзда қолган теглар учун классларни қўшамиз. Натижада куйидаги код ҳосил бўлади:

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

React компоненти яратинг, унинг ичида див, дивнинг ичида экикта тугма бўлсин. styles.css файлини тегларингиз учун CSS стиллари билан яратинг. Компонент тегларига ёзган стилларингизни қўлланг.