CSS-i-JS-biblioteker, ligesom stylede-komponenter, er blevet mere populære i de senere år. De indkapsler CSS ned til komponentniveau og giver dig mulighed for at bruge JavaScript til at definere genanvendelige stilarter.

Ved at bruge stylede komponenter kan du bevare den komponentdrevne arkitektur, som React allerede forstærker. Men biblioteket har også nogle ulemper.

Sådan fungerer stylede komponenter

Det stylede-komponenter CSS-in-JS-biblioteket giver dig mulighed for at skrive CSS inde i dine komponentfiler. Dens syntaks er den samme som CSS, så den er ret nem at hente. Det er en perfekt mellemvej for JavaScript-udviklere, der har tendens til at holde sig væk fra ren CSS.

For at se, hvordan det virker, skal du overveje følgende Titel-komponent, der gengiver et h1-element.

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

Du kan bruge denne komponent som enhver anden React-komponent.

konst Hjem = () => {
Vend tilbage (
<Titel>En stylet komponentoverskrift</Title>
	)
}
instagram viewer

Det er også meget kraftfuldt, fordi det gør det nemmere at arbejde med rekvisitter og stat.

For eksempel afhænger farven og baggrunden af ​​denne komponent af rekvisitterne.

importere stylet fra "stylede-komponenter";
konst Knap = stylet.knap`
polstring: 0.8rem 1.6rem;
 baggrundsfarve: ${(rekvisitter) => (rekvisitter.primær? "lilla": "hvid")};
 grænse: 1px solid #00000;
 farve: ${(rekvisitter) => (rekvisitter.primær? "hvid": "lilla")};
`;
eksportStandardfungereHjem() {
 Vend tilbage <Primær knap>Primær</Button>
}

Med stylede komponenter behøver du ikke manuelt at videregive rekvisitterne til CSS. Den er automatisk tilgængelig, hvilket forenkler skrivestile, der afhænger af data fra komponenten.

Fordele ved at bruge stilede komponenter

Her er nogle fordele ved at bruge biblioteket med stylede komponenter.

Det løser CSS-specificitetsproblemer

Stylede komponenter eliminerer specificitetsproblemer, da det indkapsler CSS inde i en komponent. Dette betyder, at du ikke behøver at bekymre dig om, at klassenavne støder sammen, eller at din brugergrænseflade bliver til noget rod på grund af klassenavnesammenstød.

Giver dig mulighed for at skrive CSS inde i komponenter

Som det ses af knapkomponenteksemplet, giver stylede-komponenter dig mulighed for at kombinere CSS og JS i den samme fil. Så du behøver ikke at oprette en separat CSS-fil eller blive ved med at skifte fra fil til fil.

Dette er en stor fordel, når du opretter UI-kits, fordi du gemmer alle komponenternes funktionalitet i én fil.

Andet end det, at skrive CSS inde i komponenter. Det gør det nemmere at dele rekvisitter og tilstande med stilarter.

Tillader typekontrol

Med stylede komponenter kan du skrive-tjekke de rekvisitter og værdier, der bruges i dine stilarter. For eksempel kan du omskrive knapkomponenten ovenfor ved hjælp af TypeScript.

interfacerekvisitter{
 primær: boolesk
}
const Button = styled.button<rekvisitter>`
polstring: 0.8rem 1.6rem;
 baggrundsfarve: ${(rekvisitter) => (rekvisitter.primær? "lilla": "hvid")};
 grænse: 1px solid #00000;
 farve: ${(rekvisitter) => (rekvisitter.primær? "hvid": "lilla")};
`;

Brug af TypeScript i komponenten betyder, at du kontrollerer typefejl, mens du koder, og reducerer fejlretningstiden.

Understøtter temaer ud af æsken

Tilføjelse af et mørkt tema eller ethvert andet tema til din ansøgning kan være svært og tidskrævende. Stylede komponenter forenkler dog processen. Du kan tilføje temaer til din app ved at eksportere en indpakningskomponent.

konst Knap = stylet.main`
 baggrundsfarve: ${props => rekvisitter.tema.lys.baggrund};
 farve: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Knap>
 Lys knap
</Button>
</ThemeProvider>

ThemeProvider-komponenten sender temaerne til alle de stylede komponenter, den ombryder. Disse komponenter kan derefter bruge temaværdierne i deres stilarter. I dette eksempel bruger knappen temaværdierne for baggrunds- og skriftfarverne.

Ulemper ved at bruge stilede komponenter

Mens brugen af ​​biblioteket med stylede komponenter har mange fordele, har det også ulemper.

Det er ikke rammeuafhængigt

At skrive CSS i JS betyder at adskille de to i fremtiden vil være vanskeligt, hvilket er forfærdeligt for vedligeholdelse. For eksempel, hvis du nogensinde beslutter dig for at skifte din JavaScript-ramme, bliver du nødt til at omskrive det meste af din kodebase.

Dette er tidskrævende og dyrt. Ved brug af CSS moduler eller et rammeuafhængigt bibliotek som følelser er mere fremtidssikret.

Det kan være svært at læse

Det kan være svært at skelne mellem stylede og React-komponenter, især uden for et atomare designsystem. Overvej dette eksempel:

<Hoved>
<Nav>
<ListElement>
<Linktekst>Adopter et kæledyr</LinkText>
</ListItem>
<ListElement>
<Linktekst>Doner</LinkText>
</ListItem>
</Nav>
<Header>Adopter, don't shop!</Header>
<SecondaryBtn btnText="Doner" />
</Main>

Den eneste måde at vide, hvilken komponent der indeholder forretningslogik, er ved at kontrollere, om den har rekvisitter. Desuden, selvom komponentnavnene i dette eksempel er beskrivende, er det stadig svært at visualisere dem.

For eksempel kan Header-komponenten være en overskrift, men medmindre du tjekker stilene, ved du måske aldrig, om det er en h1, h2 eller h3.

Nogle udviklere løser dette problem ved kun at bruge den stylede komponent som en indpakning og bruge de semantiske HTML-tags til elementerne i den.

I dette eksempel kunne header-komponenten bruge et h1-tag.

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

Du kan tage dette videre ved at definere de stylede komponenter i en anden fil (f.eks. styled.js), som du senere kan importere til en React-komponent.

importere * som Stylet fra './stylet'
// brug styled.components
<stylet. Hoved>
// kode
</styled.Main>

Ved at gøre dette får du et klart overblik over, hvilke komponenter der er stylet, og hvilke der er React-komponenter.

Stylede komponenter kompileres ved Runtime

For applikationer, der bruger stylede komponenter, downloader browseren CSS'en og analyserer den ved hjælp af JavaScript, før den injicerer dem på siden. Dette forårsager ydeevneproblemer, fordi brugeren skal downloade en masse JavaScript i den indledende indlæsning.

Statisk CSS er meget hurtigere. Det behøver ikke at blive behandlet, før browseren bruger det til at style sider. Biblioteket med stylede komponenter forbedres dog med hver udgivelse. Hvis du har råd til noget reduceret ydeevne, så gå videre og brug det.

Hvornår skal man bruge stilede komponenter

Nogle udviklere nyder at skrive CSS i JS-filer, mens andre foretrækker at have separate CSS-filer. Hvordan du vælger at skrive CSS, skal i sidste ende afhænge af selve projektet, og hvad du eller dit team kan lide. Stylede komponenter er et godt valg til at bygge et UI-bibliotek, da alt kan være i én fil og nemt eksporteres og genbruges.

Hvis du foretrækker at skrive ren CSS, så brug CSS-moduler. Du kan have separate CSS-filer, og det omfavner stilarter lokalt som standard. Uanset hvilket valg du træffer, er det vigtigt at have solid CSS viden.