Brug af global CSS til styling i React

Antag, at vi har en React-komponent App, som indeholder en div, og inde i div'en - tre afsnit:

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

Lad os style denne komponent. For at gøre dette, i den samme mappe src med vores komponent, opretter vi en almindelig CSS-fil med styles styles.css til vores tags.

I denne fil, for div'en, opretter vi en klasse class1 med styles:

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

Nu tilføjer vi klassen class2 med styles til det første afsnit:

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

Klasse class3 med styles til det andet afsnit:

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

Og endelig opretter vi klassen class4 til det sidste afsnit:

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

Vi er færdige med CSS-filen. Tilbage står at anvende vores CSS-styles, som vi har skrevet til tagsene. Lad os vende tilbage til vores fil App.js med komponenten.

Den første ting, vi absolut skal gøre - er at tilføje en import-sætning for vores stilfil styles.css i toppen af filen:

import './styles.css';

Nu, for at anvende CSS-klasserne fra filen i komponenten, bruger vi attributten class. For det første afsnit havde vi klassen class2, lad os anvende den:

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

På samme måde tilføjer vi klasser for de resterende tags. Som resultat får vi følgende kode:

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

Opret en React-komponent, som skal indeholde en div, og i div'en skal der være to knapper. Opret en fil styles.css med CSS-styles til dine tags. Anvend de skrevne styles på komponentens tags.