CSS modullary React bilen stil ýöretmegiň dowamy

Bizim buttons ilýmiz üstünde işi dowam etdireris. Indi esas komponent App bilen meşgullanalym, ol öňünden src papkasynyň içinde döredilendi. Onda bizde iki div, ýazgy we düwmeler bolmaly.

App.css faýlynyň adyny üýtgederis App.module.css ylalaşyk boýunça, onu boşadarys we içinde birnäçe teglere CSS stillary bilen klasslar dörederis:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Indi bolsa App.js faýlynyň mazmunyny boşadarys. Soňra React komponenty Buttons we stillary App.module.css faýlyndan import ederis. Teplerimizi ýazarys we olara stillary ulanyp, şeýle hem React komponenty Buttons ýerleşdireris:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Biz classes sözüni stillary öz içine alýan obýektiň ady üçin ulandyk, ýagny biz App.module.css faýlyndan import edýäris. Öňki ýaly, siz bu obýekti islän adyňyz bilen atlandyryp bilersiňiz.

Birnäçe kiçi ädim galdy. index.css faýlynyň adyny ýlalaşyk boýunça üýtgederis index.module.css we index.js faýlynda import setirini üýtgetmegi ýatdan çykarmaň:

import "./index.css";

Şu setire:

import "./index.module.css";

Indi biz brauzerde ilýmiziň işiniň netijesini görüp bilýäris.

Eger siz döredilen wersiýany brauzeriň öndürijiler panelinde açsaňyz, her bir komponentiň öz üýtgeşik klasslary döredilendigini görersiňiz. Şeýlelik bilen, biz artýk aýratyn komponentleriň klasslarynyň arasyndaky çakyşmadan aladalanmaly däldiris.

Möhüm bolan ýene bir zat, CSS modullary adaty daşarky CSS faýllaryny import etmäge gadagan etmeýär.

Sapakdaky teoriýa boýunça, React komponenty App⁅/c ⁆-iň içini boşadyň, inputs atly ilýňyzda, öňki sapakdaky meselelerde döreden ýaly, şeýle hem onuň içine özüňiziň döreden Inputs⁅/c ⁆ komponentiňizi birnäçe stilize edilen divde ýerleşdiriň. App⁅/c ⁆-a stilize edilen ýazgy goşuň. Hemmesini ýene bir div içine salyň. React komponenty App⁅/c ⁆-iň tegleri üçin stillary ⁅p ⁆App.modules.css⁅/p ⁆ faýlyna ýazyň.



	
		Hemmesini bilelikde jemläň, galan
		faýllary dogry birikdiriň we
		öz ilýňyzy
		inputs işlediň.