Použití globálního CSS pro stylování v Reactu

Předpokládejme, že máme React komponentu App, ve které je div a uvnitř divu - tři odstavce:

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

Pojďme tuto komponentu nastylovat. K tomu, ve stejné složce src s naší komponentou vytvoříme obyčejný CSS soubor se styly styles.css pro naše značky.

V tomto souboru pro div vytvoříme třídu class1 se styly:

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

Nyní přidáme třídu class2 se styly pro první odstavec:

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

Třídu class3 se styly pro druhý odstavec:

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

A nakonec vytvoříme třídu class4 pro poslední odstavec:

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

S CSS souborem jsme skončili. Zbývá aplikovat naše CSS styly, které jsme napsali pro značky. Vraťme se k našemu souboru App.js s komponentou.

První, co musíme určitě udělat - přidat na začátek souboru řádek importu našeho souboru stylů styles.css:

import './styles.css';

Nyní, abychom aplikovali v komponentě CSS třídy ze souboru, použijeme atribut class. Pro první odstavec jsme měli třídu class2, aplikujme ji:

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

Podobným způsobem přidáme třídy pro zbývající značky. Ve výsledku dostaneme následující kód:

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

Vytvořte React komponentu, která bude obsahovat div, a v divu budou dvě tlačítka. Vytvořte soubor styles.css s CSS styly pro vaše značky. Aplikujte na značky komponenty napsané styly.