Die gebruik van globale CSS vir stylering in React

Veronderstel ons het 'n React-komponent App, wat 'n div het, en binne die div - drie paragrawe:

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

Kom ons styl hierdie komponent. Vir hierdie doel, in dieselfde gids src met ons komponent, sal ons 'n gewone CSS-lêer skep met style styles.css vir ons etikette.

In hierdie lêer skep ons 'n klas class1 met style vir die div:

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

Laat ons nou die klas class2 byvoeg met style vir die eerste paragraaf:

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

Klas class3 met style vir die tweede paragraaf:

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

En uiteindelik, skep ons die klas class4 vir die laaste paragraaf:

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

Ons is klaar met die CSS-lêer. Dit bly net om ons CSS-style wat ons vir die etikette geskryf het, toe te pas. Kom ons gaan terug na ons lêer App.js met die komponent.

Die eerste ding wat ons absoluut moet doen - voeg aan die begin van die lêer 'n invoerstring by vir ons styl-lêer styles.css:

import './styles.css';

Nou, om die CSS-klasse van die lêer in die komponent toe te pas, gebruik ons die attribuut class. Vir die eerste paragraaf het ons die klas class2 gehad, laat ons dit toepas:

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

Op 'n soortgelyke manier voeg ons klasse by vir die res van die etikette. As gevolg sal ons die volgende kode kry:

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

Skep 'n React-komponent wat 'n div sal bevat, en in die div sal daar twee knoppies wees. Skep 'n lêer styles.css met CSS-style vir jou etikette. Pas die geskrewe style op die etikette van die komponent toe.