Fillimi i Mësimit të Stilizimit me CSS modules në React

Në këtë dhe në mësimet në vijim, ne do të shqyrtojmë një qasje tjetër moderne dhe efektive për stilizimin e komponentëve React - përdorimin e moduleve CSS.

Modulet CSS në këtë qasje janë skedarë të kompajluar CSS të veçantë, në të cilët emrat e klasave dhe animacionet ndodhen në një fushë-pamje lokale, e cila ndihmon për të shmangur konfliktet midis emrave të klasave nga komponentë të ndryshëm.

Për të filluar, le të krijojmë dhe të nisim aplikacionin tonë të thjeshtë React buttons. Për këtë, le të krijojmë një dosje të zbrazët test, të hyjmë në të dhe në terminal të shkruajmë komandat e mëposhtme:

npx create-react-app buttons
cd buttons
npm start

Nëse keni version të freskët të React, domethënë ajo mbështet Create React App v2 e lart, atëherë asnjë konfigurim shtesë nuk ka nevojë të bëhet, pasi në këtë rast modulet CSS do të mbështeten automatikisht. Për të kontrolluar hidhini një sy package.json, nëse varësia react-scripts është e versionit 2.x.x e lart, atëherë gjithçka është në rregull. Përndryshe përditësoni React-in tuaj.

Aplikacioni ynë për stilizim me metodën CSS modules do të përmbajë tre butona.

Skedarët CSS do t'i emërojmë, duke iu përmbajtur marrëveshjes, si më poshtë: [name].module.css.

Tani le të krijojmë dosjen components në src, dhe në të të shtojmë skedarin Buttons.module.css me stilat CSS për butonat tanë:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Gjithashtu në dosjen components, le të krijojmë skedarin bosh të komponentit React Buttons.js, përderisa mos e prekni skedarin e gjeneruar App.js, do të merremi me të më vonë!

Në Buttons.js patjetër importojmë skedarin me stilat CSS, dhe gjithashtu zbatojmë këto stiliza për çdo buton duke përdorur atributin class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Meqë ra fjala, nuk është e detyrueshme të përdoret fjala styles për emrin e objektit të importuar me stiliza, ju mund ta emërtoni atë, siç ju është më i përshtatshëm.

Në mësimin e ardhshëm do ta përfundojmë aplikacionin tonë.

Duke ndjekur teorinë e këtij mësimi gjeneroni aplikacionin React inputs.

Përdorni qasjen CSS modules, të paraqitur në mësim. Krijojeni në src të aplikacionit inputs skedarin Inputs.js për komponentin React Inputs, i cili do të përmbajë tre inpute. Shkruani disa stiliza në Inputs.modules.css për inputet. Importojeni këtë skedar në Inputs.js dhe zbatoni stilizat.