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 файлы менен бүттүк. Жазган тег стилдерибизди колдонууга гана калды. Компонент менен болгон 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 компонентти түзүңүз, анын ичинде див болсун, дивдин ичинде эки баскыч болсун. styles.css файлын сиздин тегдер үчүн CSS стилдери менен түзүңүз. Компоненттин тегдерине жазган стилдерди колдонуңуз.