React komponentų stiliaus nustatymo būdai

Yra daug įvairių React komponentų stiliaus nustatymo būdų. Čia mes apžvelgsime kai kuriuos pagrindinius iš jų.

Standartinis metodas, kurį galime taikyti, kaip ir įprastame žiniatinklio puslapių stilizavime, yra globalaus CSS naudojimas. Čia mes sukuriame vieną išorinį bendrą CSS failą su stiliais. Taikant šį metodą, visi klasės pavadinimai yra globalioje srityje, kas gali sukelti konfliktus tarp jų. Taip pat galima sukurti daug mažų CSS failų. Šis metodas yra mažai efektyvus kuriant didelius mastinguosius pritaikymus.

Kitas metodas - inline stilizavimas, naudodami jį, galime pridėti CSS stilius inline, panašiai kaip tai daroma įprastame HTML. Šiuo atveju dirbsime su atributu style, perduodami jam reikiamas CSS savybes. Tokio stilizavimo taikymas laikomas bloga praktika ir rekomenduojamas tik dinamiškai apskaičiuojamiems stiliams, kurie nustatomi per renderinimą. Šis būdas tinkamas greitam atskiro komponento sąsajos prototipavimui.

Keli kiti metodai, kuriuos apžvelgsime - modernūs, populiarėjantys, efektyvūs stilizavimo būdai. Tai būtent tie būdai, kurie rekomenduojami didelių mastinguų React pritaikymų stilizavimui.

Pirmasis iš jų - bibliotekos Styled Components naudojimas, kuri styliavimui naudoja šablonines eilutes. Šis metodas leidžia mums rašyti įprastą CSS JS kode, naudojant visą jo funkcionalumą.

Antrasis būdas - CSS modulių naudojimas. Šiuo atveju, CSS modulis - tai CSS failas, kuriame pagal nutylėjimą visi klasės pavadinimai ir animacijos yra vietinėje srityje, tai yra, prieinami tik komponento viduje, kuris jį naudoja.

Šiais dviem paskutiniais būdais mes negalime bijoti konfliktų tarp klasių pavadinimų, nes jie unikalūs - naudojama vietinės srities sąvoka. Taip pat, naudojant juos, atsiranda BEM metodologijos poreikis.

Kitiose pamokose mes išsamiau apžvelgsime visus čia pateiktus būdus.