React-da stillendirmek üçin Global CSS ulanylmagy

Bizde React komponenty App bardyr diýip pikir edeli, onuň içinde div we div-iň içinde üç abzas bar:

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

Geliň bu komponenti stillendireli. Bunuň üçin, komponentiň ýerleşýän src bukjasyna adaty CSS faýly styles.css dörediň, teglar üçin stiller bilen.

Bu faýlda div üçin class1 klasyny dörediň we stilleri goýuň:

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

Indi birinji abzas üçin class2 klasyny goşalyň we stilleri ýazyň:

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

class3 klasyny ikinji abzas üçin goşalyň we stilleri ýazyň:

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

We, soňunda iň soňky abzas üçin class4 klasyny dörediň:

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

Biz CSS faýly bilen işimizi gutardyk. Ýazylyp galan bolsa, ýazylan CSS stillarymyzy teglara degişli etmek. Komponentiň App.js faýlyna gaýdalyň.

Iň birinjisi, etmelimiz zat - faýlyň başyna stiller faýlymyzy styles.css import etmek üçin setir goşmak:

import './styles.css';

Indi, komponentde faýldan CSS klasslaryny ulanmak üçin, class atributyny ulanarys. Birinji abzas üçin bizde class2 klassy bardy, onuň üçin ulanyň:

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

Şuňa meňzeş ýagdaýda galan teglara hem klasslary goşuň. Netijede aşakdaky kody alyarys:

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

Div we div-iň içinde iki düwmäni öz içine alýan React komponenty dörediň. Teglaryňyz üçin CSS stillary bilen styles.css faýlyny dörediň. Komponentiň teglerine ýazylyp galan stilleri degişli ediň.