Коришћење глобалног CSS-a при стилизацији у React-у

Претпоставимо да имамо React компоненту App, у којој постоји div, а унутар tог div-a - три параграфа:

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 компоненту, која ће садржати div, а у div-у ће бити два дугмета. Креирајте фајл styles.css са CSS стиловима за ваше тагове. Примените на тагове компоненте написане стилове.