CSS-in-JS-biblioteker, som stilede komponenter, har blitt mer populære de siste årene. De kapsler inn CSS ned til komponentnivå og lar deg bruke JavaScript til å definere gjenbrukbare stiler.

Ved å bruke stilede komponenter kan du opprettholde den komponentdrevne arkitekturen som React allerede forsterker. Men biblioteket har også noen ulemper.

Hvordan stilede komponenter fungerer

De stilede komponenter CSS-in-JS-biblioteket lar deg skrive CSS inne i komponentfilene dine. Syntaksen er den samme som CSS, så den er ganske enkel å plukke opp. Det er en perfekt mellomting for JavaScript-utviklere som har en tendens til å holde seg unna ren CSS.

For å se hvordan det fungerer, bør du vurdere følgende Tittel-komponent som gjengir et h1-element.

konst Tittel = stylet.h1`
skriftstørrelse: 1.5em;
 tekst-align: center;
 fargen rød;
`;

Du kan bruke denne komponenten som alle andre React-komponenter.

konst Hjem = () => {
komme tilbake (
<Tittel>En stilet komponentoverskrift</Title>
	)
}

Den er også veldig kraftig fordi den gjør det lettere å jobbe med rekvisitter og stat.

For eksempel avhenger fargen og bakgrunnen til denne komponenten av rekvisittene.

import stylet fra "stilte komponenter";
konst Knapp = stylet.knapp`
polstring: 0.8rem 1.6rem;
 bakgrunnsfarge: ${(rekvisitter) => (rekvisitter.primær? "lilla": "hvit")};
 grense: 1px solid #00000;
 farge: ${(rekvisitter) => (rekvisitter.primær? "hvit": "lilla")};
`;
eksportmisligholdefunksjonHjem() {
 komme tilbake <Primær knapp>Hoved</Button>
}

Med stylede komponenter trenger du ikke å sende rekvisittene manuelt til CSS. Den er automatisk tilgjengelig, og forenkler skrivestiler som avhenger av data fra komponenten.

Fordeler med å bruke stilede komponenter

Her er noen fordeler ved å bruke biblioteket med stilede komponenter.

Det løser CSS-spesifisitetsproblemer

Stylede komponenter eliminerer spesifisitetsproblemer ettersom det kapsler inn CSS inne i en komponent. Dette betyr at du ikke trenger å bekymre deg for at klassenavn kolliderer eller at brukergrensesnittet ditt blir et rot på grunn av klassenavnsammenstøt.

Lar deg skrive CSS inne i komponenter

Som det fremgår av eksempelet på knappkomponenten, lar stylede-komponenter deg kombinere CSS og JS i samme fil. Så du trenger ikke å opprette en egen CSS-fil eller fortsette å bytte fra fil til fil.

Dette er en stor fordel når du lager UI-sett fordi du lagrer all funksjonaliteten til komponentene i én fil.

Annet enn det, å skrive CSS inne i komponenter. Det gjør det lettere å dele rekvisitter og tilstander med stiler.

Tillater typekontroll

Med stylede komponenter kan du skrivesjekke rekvisittene og verdiene som brukes i stilene dine. Du kan for eksempel skrive om knappekomponenten ovenfor ved å bruke TypeScript.

grensesnittRekvisitter{
 hoved: boolsk
}
const Button = styled.button<Rekvisitter>`
polstring: 0.8rem 1.6rem;
 bakgrunnsfarge: ${(rekvisitter) => (rekvisitter.primær? "lilla": "hvit")};
 grense: 1px solid #00000;
 farge: ${(rekvisitter) => (rekvisitter.primær? "hvit": "lilla")};
`;

Bruker TypeScript i komponenten betyr å sjekke typefeil mens du koder og redusere feilsøkingstiden.

Støtter tema ut av esken

Legger til et mørkt tema eller et hvilket som helst annet tema for søknaden din kan være vanskelig og tidkrevende. Stylede komponenter forenkler imidlertid prosessen. Du kan legge til temaer i appen din ved å eksportere en innpakningskomponent.

konst Knapp = stylet.main`
 bakgrunnsfarge: ${props => rekvisitter.tema.lys.bakgrunn};
 farge: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Knapp>
 Lysknapp
</Button>
</ThemeProvider>

ThemeProvider-komponenten sender temaene til alle stilkomponentene den pakker inn. Disse komponentene kan deretter bruke temaverdiene i stilene sine. I dette eksemplet bruker knappen temaverdiene for bakgrunns- og skriftfarger.

Ulemper med å bruke stilede komponenter

Selv om bruk av biblioteket med stilede komponenter har mange fordeler, har det også ulemper.

Det er ikke rammeuavhengig

Å skrive CSS i JS betyr å skille de to i fremtiden vil være vanskelig, noe som er forferdelig for vedlikehold. For eksempel, hvis du noen gang bestemmer deg for å bytte JavaScript-rammeverk, må du skrive om det meste av kodebasen din.

Dette er tidkrevende og kostbart. Ved hjelp av CSS-moduler eller et rammeuavhengig bibliotek som følelser er mer fremtidssikret.

Det kan være vanskelig å lese

Det kan være vanskelig å skille mellom stylede og React-komponenter, spesielt utenfor et atomdesignsystem. Tenk på dette eksemplet:

<Hoved>
<Nav>
<ListItem>
<Linktekst>Adopter et kjæledyr</LinkText>
</ListItem>
<ListItem>
<Linktekst>Donere</LinkText>
</ListItem>
</Nav>
<Overskrift>Adopter, don't butikk!</Header>
<SecondaryBtn btnText="Donere" />
</Main>

Den eneste måten å vite hvilken komponent som inneholder forretningslogikk er ved å sjekke om den har rekvisitter. Videre, selv om komponentnavnene i dette eksemplet er beskrivende, er det fortsatt vanskelig å visualisere dem.

For eksempel kan Header-komponenten være en overskrift, men med mindre du sjekker stilene, vet du kanskje aldri om det er en h1, h2 eller h3.

Noen utviklere løser dette problemet ved kun å bruke den stilede komponenten som en innpakning og bruke de semantiske HTML-taggene for elementene i den.

I dette eksemplet kan header-komponenten bruke en h1-tag.

<h1>Adopter, don't butikk!</h1>

Du kan ta dette videre ved å definere de stylede komponentene i en annen fil (f.eks. styled.js), som du senere kan importere til en React-komponent.

import * som Stylet fra './styled'
// bruk styled.components
<stylet. Hoved>
// kode
</styled.Main>

Ved å gjøre dette får du en klar oversikt over hvilke komponenter som er stylet og hvilke som er React-komponenter.

Stylede komponenter kompileres ved kjøretid

For applikasjoner som bruker stilede komponenter, laster nettleseren ned CSS og analyserer den ved hjelp av JavaScript før de injiseres på siden. Dette forårsaker ytelsesproblemer fordi brukeren må laste ned mye JavaScript i den første innlastingen.

Statisk CSS er mye raskere. Det trenger ikke å behandles før nettleseren bruker det til å style sider. Biblioteket med stilede komponenter blir imidlertid bedre for hver utgivelse. Hvis du har råd til noe redusert ytelse, fortsett og bruk den.

Når skal du bruke stilede komponenter

Noen utviklere liker å skrive CSS i JS-filer, mens andre foretrekker å ha separate CSS-filer. Hvordan du velger å skrive CSS bør til syvende og sist avhenge av selve prosjektet og hva du eller teamet ditt liker. Stylede komponenter er et godt valg for å bygge et UI-bibliotek siden alt kan være i én fil og enkelt eksporteres og gjenbrukes.

Hvis du foretrekker å skrive ren CSS, bruk CSS-moduler. Du kan ha separate CSS-filer, og det omfavner stiler lokalt som standard. Uansett hvilket valg du tar, er det viktig å ha solid CSS-kunnskap.