React-komponenttien tyylitysmenetelmät

On olemassa monia erilaisia tapoja tyylittää React-komponentteja. Tässä tarkastelemme joitain perusmenetelmiä.

Standardi lähestymistapa, jota voimme käyttää, kuten tavallisessa verkkosivujen tyylityksessä, on globaalin CSS:n käyttö. Tässä luomme yhden ulkoisen yhteisen CSS-tiedoston tyyleille. Tässä lähestymistavassa kaikki luokkanimet ovat globaalissa näkyvyysalueessa, mikä voi aiheuttaa ristiriitoja niiden välillä. Voimme myös tehdä useita pieniä CSS-tiedostoja. Tämä lähestymistapa on vähän tehoton suurten skaalautuvien sovellusten luomisessa.

Seuraava lähestymistapa on inlain-tyylitys, jota käyttämällä voimme lisätä CSS-tyylejä suoraan elementteihin, samaan tapaan kuin tavallisessa HTML:ssä. Tässä tapauksessa työskentelemme style-attribuutin kanssa, välittäen sille tarvittavat CSS-ominaisuudet. Tällaisen tyylityksen käyttöä pidetään huonona tapana ja sitä suositellaan vain dynaamisesti renderöinnin aikana laskettavien tyylien lisäämiseen. Tämä tapa on hyvä nopeaan prototypointiin yksittäisen komponentin käyttöliittymästä.

Seuraavat pari menetelmää, joita tarkastelemme, ovat moderneja, suosiotaan kasvattavia, tehokkaita tyylitystapoja. Nämä ovat juuri niitä menetelmiä, joita suositellaan käytettäväksi suurten skaalautuvien React-sovellusten tyylitykseen.

Ensimmäinen niistä on kirjaston Styled Components käyttö, joka hyödyntää tyylitykseen templateliteraaleja. Tämä menetelmä antaa meille mahdollisuuden kirjoittaa tavallista CSS:ää JS-koodissa, käyttäen sen koko toiminnallisuutta.

Toinen tapa on CSS-moduulien käyttö. Tässä tapauksessa CSS-moduuli on CSS-tiedosto, jossa oletusarvoisesti kaikki luokan nimet ja animaatiot ovat paikallisessa näkyvyysalueessa, eli ne ovat saatavilla vain komponentin sisällä, joka sitä käyttää.

Näissä kahdessa viimeisessä menetelmässä meidän ei tarvitse pelätä luokkanimien välisiä ristiriitoja, koska ne ovat uniikkeja - käytetään paikallisen näkyvyysalueen käsitettä. Myös BEM-metodologian tarve vähenee niiden käytössä.

Seuraavissa oppitunneissa tarkastelemme kaikkia tässä esiteltyjä menetelmiä tarkemmin.