Përdorimi i CSS global në stilizimin e React

Supozojmë se kemi një komponent React App, në të cilin ka një div, dhe brenda div - tre paragrafë:

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

Le të stilizojmë këtë komponent. Për këtë, në të njëjtën dosje src me komponentin tonë do të krijojmë një skedar të zakonshëm CSS me stilime styles.css për etiketat tona.

Në këtë skedar për div do të krijojmë një klasë class1 me stilime:

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

Tani le të shtojmë klasën class2 me stilime për paragrafin e parë:

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

Klasën class3 me stilime për paragrafin e dytë:

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

Dhe, së fundi le të krijojmë klasën class4 për paragrafin e fundit:

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

Kemi përfunduar me skedarin CSS. Mbetet të aplikojmë stilimet tona CSS të cilat i kemi shkruar për etiketat. Le të kthehemi te skedari ynë App.js me komponentin.

E para që duhet patjetër të bëjmë - të shtojmë në fillim të skedarit rreshtin e importit të skedarit tonë të stilimeve styles.css:

import './styles.css';

Tani, për të aplikuar në komponent klasat CSS nga skedari, do të përdorim atributin class. Për paragrafin e parë kishim klasën class2, le ta aplikojmë atë:

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

Në mënyrë të ngjashme do të shtojmë klasat për etiketat e mbetura. Si rezultat do të marrim kodin e mëposhtëm:

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

Krijoni një komponent React i cili do të përmbajë një div, dhe në div do të ketë dy butona. Krijoni skedarin styles.css me stilime CSS për etiketat tuaja. Aplikoni stilimet e shkruara në etiketat e komponentit.