Używanie globalnego CSS do stylowania w React

Załóżmy, że mamy komponent React App, w którym znajduje się div, a wewnątrz diva - trzy akapity:

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

Ostylejmy ten komponent. W tym celu, w tym samym folderze src z naszym komponentem utwórzmy zwykły plik CSS ze stylami styles.css dla naszych znaczników.

W tym pliku dla diva utwórzmy klasę class1 ze stylami:

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

Teraz dodajmy klasę class2 ze stylami dla pierwszego akapitu:

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

Klasę class3 ze stylami dla drugiego akapitu:

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

I na koniec utwórzmy klasę class4 dla ostatniego akapitu:

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

Z plikiem CSS skończyliśmy. Pozostało zastosować nasze style CSS, które napisaliśmy dla znaczników. Wróćmy do naszego pliku App.js z komponentem.

Pierwsza rzecz, którą musimy koniecznie zrobić - dodać na początku pliku linię importu naszego pliku stylów styles.css:

import './styles.css';

Teraz, aby zastosować w komponencie klasy CSS z pliku, użyjemy atrybutu class. Dla pierwszego akapitu mieliśmy klasę class2, zastosujmy ją:

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

W podobny sposób dodajmy klasy dla pozostałych znaczników. W rezultacie otrzymamy następujący kod:

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

Utwórz komponent React, który będzie zawierał diva, a w divie będą dwa przyciski. Utwórz plik styles.css ze stylami CSS do twoich znaczników. Zastosuj do znaczników komponentu napisane style.