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:

terminalnpx 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ë:

Buttons.module.css.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:

Buttons.jsimport 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ë.