Metoder til styling af React-komponenter

Der findes mange forskellige måder at style React-komponenter på. Her vil vi se på nogle af de grundlæggende.

Den standard tilgang, som vi kan anvende, ligesom ved almindelig styling af websider - er brugen af global CSS. Her opretter vi én ekstern fælles CSS-fil med styles. Ved denne tilgang findes alle klassernavne i det globale navneområde, hvilket kan føre til konflikter mellem dem. Det er også muligt at lave mange små CSS-filer. Denne tilgang er ikke særlig effektiv til at oprette store skalerbare applikationer.

Næste tilgang - inline-styling, ved at bruge den, kan vi tilføje CSS-styles inline, ligesom det gøres i almindelig HTML. I dette tilfælde vil vi arbejde med attributten style, og give den de nødvendige CSS-egenskaber. Anvendelse af sådan styling betragtes som dårlig stil og anbefales kun til tilføjelse af dynamisk beregnede styles under rendering. Denne måde er god til hurtig prototyping af grænsefladen for en enkelt komponent.

De næste par metoder, som vi vil se på - er moderne, populære, effektive stylingmetoder. Det er netop de metoder, som anbefales til styling af store skalerbare React-applikationer.

Den første af dem - anvendelse af biblioteket Styled Components, som bruger template-literals til styling. Denne metode giver os mulighed for at skrive almindelig CSS i JS-kode, og bruge hele dens funktionalitet.

Den anden metode - anvendelse af CSS-moduler. I dette tilfælde er et CSS-modul en CSS-fil, hvor alle klassernavne og animationer som standard er i et lokalt navneområde, hvilket betyder, at de kun er tilgængelige inde i komponenten, som bruger den.

I disse to sidste metoder behøver vi ikke at være bange for konflikter mellem klassernavne, fordi de er unikke - der bruges konceptet med lokalt navneområde. Også ved deres brug forsvinder behovet for BEM-metodologien.

I de næste lektioner vil vi se nærmere på alle de anførte metoder.