Globális CSS használata stílusozáskor Reactben

Tegyük fel, hogy van egy React komponensünk App, amelyben van egy div, és a div-en belül három bekezdés:

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

Stílusozzuk meg ezt a komponenst. Ehhez, ugyanabban a src mappában, ahol a komponensünk van, készítsünk egy sima CSS fájlt styles.css a címkéink stílusához.

Ebben a fájlban a div-hez készítsünk egy class1 osztályt stílusokkal:

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

Most adjuk hozzá a class2 osztályt stílusokkal az első bekezdéshez:

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

class3 osztály stílusokkal a második bekezdéshez:

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

Végül készítsük el a class4 osztályt az utolsó bekezdéshez:

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

A CSS fájllal készen vagyunk. Már csak alkalmaznunk kell a CSS stílusainkat, amelyeket a címkékhez írtunk. Térjünk vissza a App.js fájlhoz a komponenssel.

Az első dolog, amit feltétlenül meg kell tennünk - hozzáadni a fájl elejéhez a stílusfájlunk styles.css importálását:

import './styles.css';

Most, hogy a komponensben alkalmazhassuk a CSS osztályokat a fájlból, használjuk a class attribútumot. Az első bekezdéshez a class2 osztály tartozott, alkalmazzuk ezt:

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

Hasonló módon adjuk hozzá az osztályokat a többi címkéhez. Az eredmény a következő kód lesz:

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

Készítsen egy React komponenst, amely tartalmaz egy div-et, és a div-ben két gombot. Készítsen egy styles.css fájlt CSS stílusokkal a címkéihez. Alkalmazza a komponens címkéire az írt stílusokat.