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

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

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

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

npx 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 ոճերի հետ.

.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 ատրիբուտը.

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;

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

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

Հետևելով այս դասի տեսությանը՝ գեներացրեք React հավելված inputs:

Օգտագործեք դասում բերված CSS մոդուլների մոտեցումը: Ստեղծեք src պանակում inputs հավելվածի Inputs.js ֆայլը React կոմպոնենտի Inputs համար, որը կպարունակի երեք դաշտ: Գրեք մի քանի ոճ Inputs.modules.css ֆայլում դաշտերի համար: Ներմուծեք այս ֆայլը Inputs.js-ում և կիրառեք ոճերը: