Выкарыстанне глабальнага CSS пры стылізацыі ў React

Выкажам здагадку, у нас ёсць React кампанент App, у якім ёсць дыў, а ўнутры дыва - тры абзацы:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</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. Для першага абзаца ў нас быў клас 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 кампанент, які будзе ўтрымліваць дыў, а ў дыве будзе дзве кнопкі. Стварыце файл styles.css з CSS стылямі да вашых тэгаў. Ужыце да тэгаў кампанента напісаныя стылі.