CSS-in-JS-bibliotek, liksom stilade komponenter, har blivit mer populära de senaste åren. De kapslar in CSS ner till komponentnivå och låter dig använda JavaScript för att definiera återanvändbara stilar.
Med hjälp av formaterade komponenter kan du behålla den komponentdrivna arkitekturen som React redan förstärker. Men biblioteket har också några nackdelar.
Hur stiliserade komponenter fungerar
De stilade komponenter CSS-in-JS-biblioteket låter dig skriva CSS i dina komponentfiler. Dess syntax är densamma som CSS, så det är ganska lätt att plocka upp. Det är en perfekt mellanväg för JavaScript-utvecklare som tenderar att hålla sig borta från ren CSS.
För att se hur det fungerar, överväg följande titelkomponent som återger ett h1-element.
konst Titel = styled.h1`
textstorlek: 1.5em;
text-align: center;
färgen röd;
`;
Du kan använda den här komponenten som vilken annan React-komponent som helst.
konst Hem = () => {
lämna tillbaka (
<Titel>En formaterad komponentrubrik</Title>
)
}
Det är också väldigt kraftfullt eftersom det gör det lättare att arbeta med rekvisita och stat.
Till exempel beror färgen och bakgrunden på denna komponent på rekvisita.
importera stylad från "stilade komponenter";konst Knapp = styled.button`
stoppning: 0.8rem 1.6rem;
bakgrundsfärg: ${(rekvisita) => (rekvisita.primär? "lila": "vit")};
gräns: 1px fast #00000;
färg: ${(rekvisita) => (rekvisita.primär? "vit": "lila")};
`;
exporterastandardfungeraHem() {
lämna tillbaka <Knapp primär>Primär</Button>
}
Med stiliserade komponenter behöver du inte manuellt skicka rekvisitan till CSS. Det är automatiskt tillgängligt, vilket förenklar skrivstilar som är beroende av data från komponenten.
Fördelar med att använda stilade komponenter
Här är några fördelar med att använda biblioteket med formaterade komponenter.
Det löser CSS-specificitetsproblem
Designade komponenter eliminerar specificitetsproblem eftersom det kapslar in CSS inuti en komponent. Det betyder att du inte behöver oroa dig för att klassnamn krockar eller att ditt användargränssnitt förvandlas till en enda röra på grund av klassnamnkrockar.
Låter dig skriva CSS inuti komponenter
Som framgår av exemplet med knappkomponenter låter styled-components dig kombinera CSS och JS i samma fil. Så du behöver inte skapa en separat CSS-fil eller fortsätta växla från fil till fil.
Detta är en stor fördel när du skapar UI-kit eftersom du lagrar all funktionalitet hos komponenterna i en fil.
Annat än det, att skriva CSS inuti komponenter. Det gör det lättare att dela rekvisita och tillstånd med stilar.
Tillåter typkontroll
Med formaterade komponenter kan du typkontrollera rekvisita och värden som används i dina stilar. Du kan till exempel skriva om knappkomponenten ovan med TypeScript.
gränssnittrekvisita{
primär: booleskt
}
const Button = styled.button<rekvisita>`
stoppning: 0.8rem 1.6rem;
bakgrundsfärg: ${(rekvisita) => (rekvisita.primär? "lila": "vit")};
gräns: 1px fast #00000;
färg: ${(rekvisita) => (rekvisita.primär? "vit": "lila")};
`;
Använder TypeScript i komponenten innebär att kontrollera typfel när du kodar och minska felsökningstiden.
Stödjer tema ur lådan
Lägger till ett mörkt tema eller något annat tema för din ansökan kan vara svårt och tidskrävande. Men stilade komponenter förenklar processen. Du kan lägga till teman i din app genom att exportera en
konst Knapp = styled.main`
bakgrundsfärg: ${props => rekvisita.tema.ljus.bakgrund};
färg: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Knapp>
Ljusknapp
</Button>
</ThemeProvider>
ThemeProvider-komponenten skickar teman till alla formaterade komponenter som den omsluter. Dessa komponenter kan sedan använda temavärdena i sina stilar. I det här exemplet använder knappen temavärdena för bakgrunds- och teckensnittsfärger.
Nackdelar med att använda stilade komponenter
Även om det har många fördelar att använda biblioteket med formaterade komponenter, har det också nackdelar.
Det är inte ramoberoende
Att skriva CSS i JS innebär att separera de två i framtiden kommer att bli svårt, vilket är hemskt för underhållbarheten. Till exempel, om du någon gång bestämmer dig för att byta din JavaScript-ramverk, måste du skriva om det mesta av din kodbas.
Detta är tidskrävande och kostsamt. Använder sig av CSS-moduler eller ett ramoberoende bibliotek som känslor är mer framtidssäkert.
Det kan vara svårt att läsa
Det kan vara svårt att skilja mellan utformade och React-komponenter, särskilt utanför ett atomärt designsystem. Tänk på det här exemplet:
<Main>
<Nav>
<Listobjekt>
<Länktext>Adoptera ett husdjur</LinkText>
</ListItem>
<Listobjekt>
<Länktext>Donera</LinkText>
</ListItem>
</Nav>
<Rubrik>Adoptera, don't handla!</Header>
<SecondaryBtn btnText="Donera" />
</Main>
Det enda sättet att veta vilken komponent som innehåller affärslogik är att kontrollera om den har rekvisita. Dessutom, även om komponentnamnen i det här exemplet är beskrivande, är det fortfarande svårt att visualisera dem.
Till exempel kan Header-komponenten vara en rubrik, men om du inte kontrollerar stilarna kanske du aldrig vet om det är en h1, h2 eller h3.
Vissa utvecklare löser detta problem genom att bara använda den formaterade komponenten som ett omslag och använda de semantiska HTML-taggarna för elementen inuti den.
I det här exemplet kan rubrikkomponenten använda en h1-tagg.
<h1>Adoptera, don't handla!</h1>
Du kan ta detta vidare genom att definiera de formaterade komponenterna i en annan fil (t.ex. styled.js), som du senare kan importera till en React-komponent.
importera * som Stylad från './styled'
// använd styled.components
<stylad. Main>
// kod
</styled.Main>
Genom att göra detta får du en tydlig bild av vilka komponenter som är utformade och vilka som är React-komponenter.
Stiliserade komponenter kompileras vid körning
För applikationer som använder formaterade komponenter laddar webbläsaren ner CSS och analyserar den med JavaScript innan de injiceras på sidan. Detta orsakar prestandaproblem eftersom användaren måste ladda ner mycket JavaScript i den initiala laddningen.
Statisk CSS är mycket snabbare. Det behöver inte bearbetas innan webbläsaren använder det för att utforma sidor. Biblioteket med stilade komponenter förbättras dock för varje utgåva. Om du har råd med lite reducerad prestanda, fortsätt och använd den.
När ska man använda stilade komponenter
Vissa utvecklare tycker om att skriva CSS i JS-filer, medan andra föredrar att ha separata CSS-filer. Hur du väljer att skriva CSS bör i slutändan bero på själva projektet och vad du eller ditt team gillar. Stiliserade komponenter är ett bra val för att bygga ett UI-bibliotek eftersom allt kan vara i en fil och enkelt exporteras och återanvändas.
Om du föredrar att skriva ren CSS, använd CSS-moduler. Du kan ha separata CSS-filer, och det omfångar stilar lokalt som standard. Oavsett vilket val du gör är det viktigt att ha gedigen CSS-kunskap.
