A React komponensek stílusának módjai
Számos különböző módja létezik a React komponensek stílusának. Itt néhány alapvetőt fogunk megvizsgálni.
A szabványos megközelítés, amelyet alkalmazhatunk, akárcsak a hagyományos weboldal-stílusozásnál - ez a globális CSS használata. Itt létrehozunk egy külső, közös CSS fájlt a stílusokkal. Ezzel a megközelítéssel az összes osztálynév a globális névtérben található, ami konfliktusokhoz vezethet közöttük. Szintén készíthetünk számos kis CSS fájlt. Ez a megközelítés kevésbé hatékony nagy méretezhető alkalmazások létrehozásakor.
A következő megközelítés - a inline stílusozás,
ennek használatával CSS stílusokat adhatunk hozzá inline,
hasonlóan ahhoz, ahogyan a hagyományos HTML-ben történik. Ebben
az esetben a
style attribútummal fogunk dolgozni,
átadva neki a szükséges
CSS tulajdonságokat. Az ilyen stílusozás alkalmazása
rossz gyakorlatnak számít és csak
a renderelés során dinamikusan
számított stílusok hozzáadására ajánlott. Ez a
mód kiváló az egyes komponensek felületének
gyors prototípuskészítéséhez.
A következő pár módszer, amelyet megvizsgálunk - modern, egyre népszerűbb, hatékony stílusozási módok. Ezek pontosan azok a módszerek, amelyek alkalmazása ajánlott nagy méretezhető React alkalmazások stílusozásához.
Az első közülük - a Styled Components könyvtár alkalmazása, amely a stílusozáshoz sablon literálokat használ. Ez a módszer lehetővé teszi számunkra, hogy hagyományos CSS-t írjunk JS kódban, annak teljes funkcionalitását kihasználva.
A második mód - a CSS modulok alkalmazása. Ebben az esetben a CSS modul egy olyan CSS fájl, amelyben alapértelmezetten minden osztálynév és animáció a lokális névtérben található, azaz csak azon a komponensen belül elérhető, amely használja azt.
Ez utóbbi két módszernél nem kell félnünk az osztálynevek közötti konfliktusoktól, hiszen azok egyediek - a lokális névtér koncepcióját alkalmazzuk. Szintén ezek használatakor elmúlik a BEM metodológia szükségessége.
A következő leckékben részletesebben megvizsgáljuk az itt bemutatott módszereket.
