Spôsoby štýlovania React komponentov

Existuje veľa rôznych spôsobov štýlovania React komponentov. Tu si predstavíme niektoré základné z nich.

Štandardný prístup, ktorý môžeme použiť, rovnako ako pri bežnom štýlovaní webstránok - je použitie globálneho CSS. Tu vytvárame jeden externý spoločný CSS súbor so štýlmi. Pri tomto prístupe sú všetky názvy tried v globálnom mennom priestore, čo môže viesť ku konfliktom medzi nimi. Tiež je možné vytvoriť veľa malých CSS súborov. Tento prístup je málo efektívny pri tvorbe veľkých škálovateľných aplikácií.

Ďalší prístup - inline štýlovanie, použitím toho, môžeme pridať CSS štýly inline, podobne ako sa to robí v bežnom HTML. V tomto prípade budeme pracovať s atribútom style, odovzdávajúc mu potrebné CSS vlastnosti. Použitie takéhoto štýlovania sa považuje za zlý štýl a odporúča sa iba na pridanie dynamicky vypočítavaných počas renderovania štýlov. Tento spôsob je vhodný pre rýchle prototypovanie rozhrania jednotlivého komponentu.

Ďalšie dva spôsoby, ktoré si predstavíme - moderné, získavajúce popularitu, efektívne spôsoby štýlovania. To sú práve tie spôsoby, ktoré sa odporúčajú použiť na štýlovanie veľkých škálovateľných React aplikácií.

Prvý z nich - aplikácia knižnice Styled Components, ktorá využíva na štýlovanie template literálov. Táto metóda nám umožňuje písať obyčajný CSS v JS kóde, využívajúc celú jeho funkcionalitu.

Druhý spôsob - aplikácia CSS modulov. V tomto prípade, CSS modul - je taký CSS súbor, v ktorom štandardne všetky názvy tried a animácií sú v lokálnom mennom priestore, to znamená dostupné len v rámci komponentu, ktorý ho používa.

V týchto dvoch posledných spôsoboch sa nemusíme báť konfliktov medzi názvami tried, pretože sú unikátne - používa sa koncept lokálneho menného priestoru. Tiež pri ich použití odpadá potreba metodológie BEM.

V nasledujúcich lekciách si všetky tu uvedené spôsoby predstavíme podrobnejšie.