Vazhdimi i studimit të stilizimit me CSS modules React

Vazhdojmë punën mbi aplikacionin tonë buttons. Tani do të merremi me komponentin kryesor App, i cili tashmë ishte Gjeneruar në dosjen src fillimisht. Në të do të kemi dy div, një titull dhe një buton.

Le të ndryshojmë emrin e file-it App.css në App.module.css sipas marrëveshjes, ta pastrojmë atë dhe të krijojmë në të disa Klase me stil CSS për taget:

.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;
}

Tani le të pastrojmë përmbajtjen e file-it App.js. Pastaj le të importojmë komponentin React Buttons dhe stilet nga App.module.css. Le të shkruajmë taget tona dhe të aplikojmë stilet në to, si dhe të vendosim komponentin React Buttons:

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;

Ne kemi përdorur fjalën classes për emrin e objektit që përmban stilet, i cili ne e importojmë nga App.module.css. Ashtu Si në rastin e mëparshëm, ju mund ta emëroni këtë objekt si të jetë e përshtatshme për ju.

Kanë mbetur edhe disa hapa të vegjël. Le të ndryshojmë emrin e file-it index.css sipas marrëveshjes në index.module.css dhe në file-in index.js le të mos harrojmë të zëvendësojmë rreshtin e importit:

import "./index.css";

Me rreshtin:

import "./index.module.css";

Tani ne mund të shohim në shfletues Rezultatin e punës së aplikacionit tonë.

Nëse hapni markup-in e gjeneruar në panelin e zhvilluesit në shfletues, ju do të shihni se çdo komponent ka të gjeneruar klasat e veta unike. Kështu, ne nuk kemi më nevojë të shqetësohemi për konfliktet midis klasave të komponentëve individual Komponentëve.

Është e rëndësishme gjithashtu që modulet CSS nuk e ndalojnë Importimin e file-ve të zakonshëm të jashtëm CSS.

Duke ndjekur teorinë nga mësimi, pastroni komponentin React App të aplikacionit tuaj inputs, të cilin e keni krijuar në Detyrat e mësimit të kaluar, si dhe vendoseni në të, të krijuarin nga ju, Inputs në ndonjë div të stilizuar. Shtoni në App një titull të stilizuar. Të gjitha këto vendosini në një div tjetër. Stilet për taget e komponentit React App shkruani në App.modules.css.

Mblidhni të gjitha së bashku, lidhni si duhet File-t e mbetur dhe nise aplikacionin tuaj inputs.