Sätt att styla React-komponenter

Det finns många olika sätt att styla React-komponenter. Här kommer vi att titta på några grundläggande av dem.

Det standardtillvägagångssätt som vi kan använda, precis som vid vanlig styling av webbsidor, är att använda global CSS. Här skapar vi en extern gemensam CSS-fil med stilar. Med detta tillvägagångssätt finns alla klassnamn i det globala namnrymden, vilket kan leda till konflikter mellan dem. Det går också att skapa många små CSS-filer. Detta tillvägagångssätt är ineffektivt när man skapar stora skalbara applikationer.

Nästa tillvägagångssätt - inlinestyling, genom att använda det kan vi lägga till CSS-stilar inline, liknande hur det görs i vanlig HTML. I det här fallet kommer vi att arbeta med attributet style, och ge den nödvändiga CSS-egenskaper. Att använda sådan styling anses vara dålig stil och rekommenderas endast för att lägga till dynamiskt beräknade stiler under rendering. Detta sätt är bra för snabb prototypframställning av gränssnittet för en enskild komponent.

De följande par sätten som vi kommer att titta på - moderna, växande i popularitet, effektiva sätt att styla. Det är just de sätt som rekommenderas att använda för styling av stora skalbara React-applikationer.

Den första av dem - att använda biblioteket Styled Components, som använder mallsträngar för styling. Denna metod låter oss skriva vanlig CSS i JS-kod, och använda all dess funktionalitet.

Det andra sättet - att använda CSS-moduler. I detta fall är en CSS-modul en sådan CSS-fil där som standard alla klassnamn och animationer finns i den lokala namnrymden, det vill säga endast tillgängliga inuti komponenten som använder den.

I dessa två sista sätt behöver vi inte vara rädda för konflikter mellan klassnamn, eftersom de är unika - konceptet med lokal namnrymd används. Även behovet av BEM-metodologin försvinner när de används.

I de följande lektionerna kommer vi att titta på alla här angivna sätt mer detaljerat.