Použitie globálneho CSS pri štýľovaní v Reacte

Predpokladajme, že máme React komponent App, v ktorom je div, a vnútri divu - tri odseky:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Poďme naštýlovať tento komponent. Pre to, v rovnakej priečinku src s našim komponentom vytvoríme obyčajný CSS súbor so štýlmi styles.css pre naše elementy.

V tomto súbore pre div vytvoríme triedu class1 so štýlmi:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Teraz pridajme triedu class2 so štýlmi pre prvý odsek:

.class2 {
	color: orangered;
	font-weight: bold;
}

Triedu class3 so štýlmi pre druhý odsek:

.class3 {
	font-style: italic;
	color: brown;
}

A nakoniec vytvoríme triedu class4 pre posledný odsek:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

S CSS súborom sme skončili. Ostáva aplikovať naše CSS štýly, ktoré sme napísali pre elementy. Vráťme sa k nášmu súboru App.js s komponentom.

Prvá vec, ktorú musíme nevyhnutne urobiť - pridať na začiatok súboru riadok importu nášho súboru štýlov styles.css:

import './styles.css';

Teraz, aby sme aplikovali v komponente CSS triedy zo súboru, použijeme atribút class. Pre prvý odsek sme mali triedu class2, aplikujme ju:

<p class="class2">text</p>

Podobným spôsobom pridáme triedy pre zvyšné elementy. Vo výsledku dostaneme nasledujúci kód:

<div class="class1">
	<p class="class2">text</p>
	<p class="class3">text</p>
	<p class="class4">text</p>
</div>

Vytvorte React komponent, ktorý bude obsahovať div, a v div-e budú dve tlačidlá. Vytvorte súbor styles.css s CSS štýlmi pre vaše elementy. Aplikujte na elementy komponentu napísané štýly.