Metoder for styling av React-komponenter

Det finnes mange forskjellige måter å style React-komponenter på. Her vil vi se på noen av de grunnleggende.

Standard tilnærmingen, som vi kan bruke, slik som ved vanlig styling av nettsider - er bruk av global CSS. Her oppretter vi én ekstern felles CSS-fil med stiler. Med denne tilnærmingen er alle klassennavn i det globale navneområdet, noe som kan føre til konflikter mellom dem. Også kan man lage mange små CSS-filer. Denne tilnærmingen er lite effektiv for å opprette store skalerbare applikasjoner.

Neste tilnærming - inlinestyling, ved å bruke den, kan vi legge til CSS-stiler inline, liksom som det gjøres i vanlig HTML. I dette tilfellet vil vi jobbe med attributtet style, ved å gi det de nødvendige CSS-egenskapene. Bruk av slik styling regnes som dårlig stil og anbefales bare for å legge til dynamisk beregnede under rendering stiler. Denne måten er god for rask prototyping av grensesnittet til en enkelt komponent.

De neste par måtene, som vi vil se på - moderne, økende i popularitet, effektive måter å style på. Det er nettopp disse måtene som anbefales å bruke for styling av store skalerbare React-applikasjoner.

Den første av dem - bruk av biblioteket Styled Components, som bruker for styling malstrenger. Denne metoden lar oss skrive vanlig CSS i JS-kode, ved å bruke hele dens funksjonalitet.

Den andre måten - bruk av CSS-moduler. I dette tilfellet, CSS-modul - er en slik CSS-fil, der som standard alle klassennavn og animasjoner er i det lokale navneområdet, det vil si tilgjengelige bare innenfor komponenten, som bruker den.

I disse to siste måtene trenger vi ikke å frykte konflikter mellom klassennavn, for de er unike - det brukes konseptet med lokalt navneområde. Også ved deres bruk forsvinner behovet for BEM-metodologien.

I de følgende leksjonene vil vi se på alle nevnte måter nærmere.