CSS մոդուլներով React-ում ոճավորման ուսումնասիրության սկիզբ

Այս և հաջորդ դասերում մենք կդիտարկենք React կոմպոնենտների ոճավորման ևս մեկ ժամանակակից և արդյունավետ մոտեցում՝ CSS մոդուլների օգտագործումը:

CSS մոդուլներ այս մոտեցումում առանձին կոմպիլացված CSS ֆայլեր են, որոնցում դասերի և անիմացիաների անունները gտնվում են տեղային տեսանելիության տիրույթում, ինչը խուսափում է տարբեր կոմպոնենտներից ստացված դասերի անունների միջև առաջացող կոնֆլիկտներից:

Սկսելու համար ստեղծենք և գործարկենք մեր պարզունակ React հավելվածը buttons: Դրա համար ստեղծենք դատարկ պանակ test, մտնենք դրա մեջ և տերմինալում գրենք հետևյալ հրամանները:

terminalnpx create-react-app buttons
cd buttons
npm start

Եթե դուք ունեք React-ի թարմ տարբերակ, այսինքն այն աջակցում է Create React App v2 և ավելի բարձր, ապա ոչ մի լրացուցիչ կարգավորում կատարելու կարիք չկա, քանի որ այս դեպքում CSS մոդուլները կլինեն ինքնաբերաբար աջակցվող: Ստուգելու համար նայեք package.json ֆայլին, եթե կախվածությունը react-scripts 2.x.x կամ ավելի բարձր տարբերակի է, ապա ամեն ինչ կարգին է: Հակառակ դեպքում թարմացրեք ձեր React-ը:

CSS մոդուլների եղանակով ոճավորվելիք մեր հավելվածը կպարունակի երեք կոճակ:

CSS ֆայլերը մենք կանվանենք, պահպանելով համաձայնությունը, հետևյալ կերպ. [name].module.css:

Եկեք հիմա ստեղծենք components պանակը src-ի ներսում, և դրա մեջ ավելացնենք Buttons.module.css ֆայլը մեր կոճակների CSS ոճերի հետ.

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

Նաև components պանակում, ստեղծենք դատարկ React կոմպոնենտի Buttons.js ֆայլը, միևնույն ժամանակ դեռ չդիպչեք ստեղծված App.js ֆայլին, մենք դրան կզբաղվենք ավելի ուշ:

Buttons.js-ում պարտադիր ներմուծեք CSS ոճերի ֆայլը, ինչպես նաև կիրառեք այդ ոճերը յուրաքանչյուր կոճակի վրա օգտագործելով 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;

Ի դեպ, պարտադիր չէ օգտագործել styles բառը ոճերի ներմուծված օբյեկտի անվան համար, դուք կարող եք այն անվանել, ինչպես ձեզ հարմար է:

Հաջորդ դասում մենք կավարտենք մեր հավելվածը: