React Komponentlərinin Stiləşdirilməsi Üsulları

React komponentlərinin stiləşdirilməsi üçün çoxlu müxtəlif üsullar mövcuddur. Burada biz onların bəzi əsaslarını nəzərdən keçirəcəyik.

Tətbiq edə biləcəyimiz standart yanaşma, adi veb səhifələrin stiləşdirilməsində olduğu kimi, qlobal CSS istifadəsidir. Burada biz stilərlə bir xarici ümumi CSS faylı yaradırıq. Bu yanaşmada, bütün sinif adları qlobal əhatə dairəsində yerləşir, bu da onlar arasında qarşılıqlı təsirə səbəb ola bilər. Həmçinin çoxlu kiçik CSS faylları da yarada bilərik. Bu yanaşma böyük miqyaslı tətbiqlər yaratmaqda az səmərəlidir.

Növbəti yanaşma - inline stiləşdirmə, ondan istifadə edərək, CSS stillərini inline əlavə edə bilərik, adi HTML-də edildiyinə bənzər şəkildə. Bu halda biz style atributu ilə işləyəcəyik, ona lazımi CSS xüsusiyyətlərini ötürərək. Belə bir stiləşdirmənin tətbiqi pis üslub sayılır və yalnız render zamanı dinamik hesablanan stilləri əlavə etmək üçün tövsiyə olunur. Bu üsul ayrı bir komponentin interfeysini sürətli prototipləşdirmək üçün yaxşıdır.

Nəzərdən keçirəcəyimiz növbəti bir neçə üsul - müasir, populyarlıq qazanan, səmərəli stiləşdirmə üsullarıdır. Bunlar, məhz, böyük miqyaslı React tətbiqlərinin stiləşdirilməsi üçün tətbiq etmək tövsiyə olunan üsullardır.

Onlardan birincisi - stilizasiya üçün şablon sətirlərindən istifadə edən Styled Components kitabxanasının tətbiqidir. Bu metod bizə onun bütün funksionallığından istifadə edərək, JS kodunda adi CSS yazmağa imkan verir.

İkinci üsul - CSS modullarının tətbiqidir. Bu halda, CSS modulu - standart olaraq bütün sinif adlarının və animasiyaların lokal əhatə dairəsində yerləşdiyi, yəni yalnız onu istifadə edən komponent daxilində əldə edilə bilən bir CSS faylıdır.

Bu son iki üsulda biz sinif adları arasında qarşılıqlı təsirdən qorxmaya bilərik, çünki onlar unikaldır - lokal əhatə dairəsi anlayışı istifadə olunur. Həmçinin onların istifadəsində BEM metodologiyasına ehtiyac qalmır.

Növbəti dərslərdə biz burada göstərilən bütün üsulları daha ətraflı nəzərdən keçirəcəyik.