Използване на глобални CSS при стилизиране в React

Да предположим, че имаме React компонент App, в който има div, а вътре в div - три параграфа:

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 ще има две бутони. Създайте файл styles.css с CSS стилове за вашите тагове. Приложете към таговете на компонента написаните стилове.