Slogi stilizacije React komponent

Obstaja veliko različnih načinov stilizacije React komponent. Tukaj bomo preučili nekatere osnovne.

Standardni pristop, ki ga lahko uporabimo, tako kot pri običajni stilizaciji spletnih strani - je uporaba globalnega CSS. Tukaj ustvarimo eno zunanjo skupno CSS datoteko s slogi. Pri tem pristopu so vsa imena razredov v globalnem obsegu, kar lahko vodi do konfliktov med njimi. Prav tako lahko naredimo veliko majhnih CSS datotek. Ta pristop je malo učinkovit pri ustvarjanju velikih razširljivih aplikacij.

Naslednji pristop - inlinna stilizacija, z uporabo njega lahko dodamo CSS sloge inline, podobno kot se to naredi v običajnem HTML. V tem primeru bomo delali z atributom style, tako da mu podamo potrebne CSS lastnosti. Uporaba takšne stilizacije velja za slab ton in je priporočljiva samo za dodajanje dinamično izračunanih med izrisovanjem stilov. Ta način je dober za hitro prototipiranje vmesnika posamezne komponente.

Naslednja para načinov, ki jih bomo preučili - sodobni, vse bolj priljubljeni, učinkoviti načini stilizacije. To so prav tisti načini, ki se priporočajo za uporabo pri stilizaciji velikih razširljivih React aplikacij.

Prvi med njimi - uporaba knjižnice Styled Components, ki za stilizacijo uporablja predloge nizov. Ta metoda nam omogoča pisanje običajnega CSS v JS kodi, z uporabo vse njegove funkcionalnosti.

Drugi način - uporaba CSS modulov. V tem primeru je CSS modul - taka CSS datoteka, v kateri so privzeto vsa imena razredov in animacij v lokalnem obsegu, kar pomeni, da so dostopni samo znotraj komponente, ki jo uporablja.

Pri teh dveh zadnjih načinih se nam ni treba bati konfliktov med imeni razredov, saj so enolična - uporablja se koncept lokalnega obsega. Prav tako pri njihovi uporabi odpade potreba po metodologiji BEM.

V naslednjih lekcijah bomo vse navedene tukaj načine podrobneje preučili.