Globaalin CSS:n käyttö React-komponenttien tyylittelyssä

Oletetaan, että meillä on React-komponentti App, jossa on div, ja divin sisällä kolme kappaletta:

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

Tyylitellään tämä komponentti. Tehdään tätä varten samaan kansioon src komponenttimme kanssa tavallinen CSS-tiedosto tyyleille styles.css elementeillemme.

Tässä tiedostossa luodaan diville luokka class1 tyyleillä:

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

Lisätään nyt luokka class2 tyyleillä ensimmäiselle kappaleelle:

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

Luokka class3 tyyleillä toiselle kappaleelle:

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

Ja lopuksi luodaan luokka class4 viimeiselle kappaleelle:

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

CSS-tiedoston kanssa olemme valmiit. Jäljelle jää vain soveltaa CSS-tyylimme, jotka kirjoitimme elementeille. Palataan tiedostoomme App.js komponentin kanssa.

Ensimmäinen asia, joka meidän on ehdottomasti tehtävä - lisätä tiedoston alkuun tyylitiedostomme styles.css tuontirivi:

import './styles.css';

Nyt, jotta voitaisiin soveltaa komponentissa CSS-luokkia tiedostosta, käytetään attribuuttia class. Ensimmäiselle kappaleelle meillä oli luokka class2, sovelletaan sitä:

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

Lisätään vastaavasti luokat lopuille elementeille. Tuloksena saamme seuraavan koodin:

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

Luo React-komponentti, joka sisältää divin, ja divin sisällä kaksi painiketta. Luo tiedosto styles.css CSS-tyyleillä elementeillesi. Sovella komponentin elementteihin kirjoitetut tyylit.