Bruk av global CSS for styling i React

Anta at vi har en React-komponent App som inneholder en div, og inni div-en - tre avsnitt:

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

La oss style denne komponenten. For å gjøre dette, i samme mappe src som vår komponent, skal vi opprette en vanlig CSS-fil med stiler styles.css for våre tagger.

I denne filen skal vi for div-en opprette en klasse class1 med stiler:

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

Nå legger vi til klassen class2 med stiler for det første avsnittet:

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

Klassen class3 med stiler for det andre avsnittet:

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

Og til slutt oppretter vi klassen class4 for det siste avsnittet:

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

Vi er ferdige med CSS-filen. Det som gjenstår er å bruke våre CSS-stiler som vi skrev for taggene. La oss gå tilbake til vår fil App.js med komponenten.

Det første vi absolutt må gjøre - er å legge til en import-setning for vår stilfil styles.css på toppen av filen:

import './styles.css';

Nå, for å bruke i komponenten CSS-klassene fra filen, bruker vi attributtet class. For det første avsnittet hadde vi klassen class2, la oss bruke den:

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

På samme måte legger vi til klasser for de andre taggene. Som et resultat får vi følgende kode:

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

Opprett en React-komponent som skal inneholde en div, og i div-en skal det være to knapper. Opprett en fil styles.css med CSS-stiler for dine tagger. Bruk de skrevne stilene på komponentens tagger.