React-də CSS modulları ilə stil verməyə başlamaq

Bu və sonrakı dərslərdə, biz React komponentlərinin stil verilməsinə daha bir müasir və səmərəli yanaşmanı nəzərdən keçirəcəyik - CSS modullarının istifadəsi.

CSS modulları bu yanaşmada - ayrı-ayrı kompilyasiya olunmuş CSS fayllarıdır, hansında ki, klas və animasiya adları lokal əhatə dairəsində yerləşir, bu da müxtəlif komponentlərdən olan klas adları arasında toqquşmanın qarşısını alır.

Başlamaq üçün yaradaq və işə salaq bizim kiçik React tətbiqimiz buttons. Bunun üçün boş qovluq yaradaq test, ora daxil olaq və terminalda aşağıdakı əmrləri yazaq:

terminalnpx create-react-app buttons
cd buttons
npm start

Əgər sizin React versiyanız təzədirsə, yəni Create React App v2 və daha yuxarı versiyanı dəstəkləyirsə, onda heç bir əlavə konfiqurasiya etmək lazım deyil, çünki bu halda CSS modulları avtomatik olaraq dəstəklənəcək. Yoxlamaq üçün nəzər yetirin package.json-ə, əgər asılılıq react-scripts versiyası 2.x.x və yuxarıdırsa, onda hər şey qaydasındadır. Əks halda React-inizi yeniləyin.

CSS modulları üsulu ilə stil verilməsi üçün bizim tətbiqimiz üç düyməciyi ehtiva edəcək.

CSS fayllarını biz adlandıracayıq, razılaşmaya əməl edərək, aşağıdakı kimi: [name].module.css.

Gəlin indi yaradaq qovluq components src içərisində, və ona əlavə edək fayl Buttons.module.css bizim düymələrimiz üçün CSS stilləri ilə:

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

Həmçinin components qovluğunda, yaradaq boş fayl React komponenti Buttons.js, bu zaman hələlik tərtib olunmuş fayla App.js toxunmayın, biz onunla sonra məşğul olacayıq!

Buttons.js faylında mütləq import edək CSS stilləri olan faylı, həmçinin tətbiq edək bu stilləri hər bir düyməyə atribut vasitəsilə 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;

Yeri gəlmişkən, mütləq deyil ki, söz styles istifadə olunsun import edilən stil obyekti üçün, siz onu adlandıra bilərsiniz, necə ki, sizə rahatdır.

Növbəti dərsdə biz tətbiqimizi tamamlayacayıq.