Knjižnice CSS-in-JS, tako kot styled-components, so v zadnjih letih postale bolj priljubljene. Enkapsulirajo CSS do ravni komponente in vam omogočajo uporabo JavaScripta za definiranje slogov za večkratno uporabo.

Z uporabo stiliziranih komponent lahko ohranite arhitekturo, ki temelji na komponentah, ki jo React že krepi. Toda knjižnica ima tudi nekaj slabosti.

Kako delujejo stilizirane komponente

The stilizirane komponente Knjižnica CSS-in-JS vam omogoča pisanje CSS-ja znotraj datotek komponent. Njegova sintaksa je enaka sintaksi CSS, zato ga je zelo enostavno razumeti. To je popolna srednja pot za razvijalce JavaScript, ki se izogibajo čistemu CSS.

Če si želite ogledati, kako deluje, razmislite o naslednji komponenti Title, ki upodablja element h1.

konst Naslov = styled.h1`
velikost pisave: 1.5em;
 poravnava besedila: sredina;
 barva: rdeča;
`;

To komponento lahko uporabljate kot katero koli drugo komponento React.

konst Domov = () => {
vrnitev (
<Naslov>Slogovan naslov komponente</Title>
	)
}

Je tudi zelo močan, ker olajša delo z rekviziti in stanjem.

instagram viewer

Barva in ozadje te komponente sta na primer odvisna od rekvizitov.

uvoz stilizirano od "styled-components";
konst Gumb = styled.button`
oblazinjenje: 0.8rem 1.6rem;
 barva ozadja: ${(rekviziti) => (rekviziti.primarni? "vijolična": "bela")};
 meja: 1px trdna #00000;
 barva: ${(rekviziti) => (rekviziti.primarni? "bela": "vijolična")};
`;
izvozprivzetofunkcijodomov() {
 vrnitev <Primarni gumb>Primarni</Button>
}

Pri oblikovanih komponentah vam ni treba ročno posredovati rekvizitov v CSS. Na voljo je samodejno in poenostavlja sloge pisanja, ki so odvisni od podatkov iz komponente.

Prednosti uporabe oblikovanih komponent

Tukaj je nekaj prednosti uporabe knjižnice stiliziranih komponent.

Rešuje težave s specifičnostjo CSS

Komponente s slogom odpravljajo težave s specifičnostjo, saj ujemajo CSS znotraj komponente. To pomeni, da vam ni treba skrbeti, da bi se imena razredov spopadala ali da bi se vaš uporabniški vmesnik spremenil v zmešnjavo zaradi spopadov imen razredov.

Omogoča vam pisanje CSS znotraj komponent

Kot je razvidno iz primera komponente gumba, vam styled-components omogoča kombiniranje CSS in JS v isti datoteki. Torej vam ni treba ustvariti ločene datoteke CSS ali nenehno preklapljati iz datoteke v datoteko.

To je velika prednost pri ustvarjanju kompletov uporabniškega vmesnika, saj vse funkcije komponent shranite v eno datoteko.

Razen tega pisanje CSS znotraj komponent. Poenostavi skupno rabo rekvizitov in stanj s slogi.

Omogoča preverjanje tipa

S stiliziranimi komponentami lahko vtipkate rekvizite in vrednosti, uporabljene v vaših slogih. Zgornjo komponento gumba lahko na primer prepišete z uporabo TypeScripta.

vmesnikrekviziti{
 primarni: logično
}
const Button = styled.button<rekviziti>`
oblazinjenje: 0.8rem 1.6rem;
 barva ozadja: ${(rekviziti) => (rekviziti.primarni? "vijolična": "bela")};
 meja: 1px trdna #00000;
 barva: ${(rekviziti) => (rekviziti.primarni? "bela": "vijolična")};
`;

Uporaba TypeScript v komponenti pomeni preverjanje tipskih napak med kodiranjem in skrajšanje časa odpravljanja napak.

Podpira tematiziranje iz škatle

Dodajanje temne teme ali katera koli druga tema vaše aplikacije je lahko težavna in dolgotrajna. Vendar komponente Styled poenostavljajo postopek. Svoji aplikaciji lahko dodate teme tako, da izvozite a ovojna komponenta.

konst Gumb = styled.main`
 barva ozadja: ${props => props.theme.light.background};
 barva: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={tema}>
<Gumb>
 Gumb za osvetlitev
</Button>
</ThemeProvider>

Komponenta ThemeProvider posreduje teme vsem oblikovanim komponentam, ki jih ovija. Te komponente lahko nato uporabijo vrednosti teme v svojih slogih. V tem primeru gumb uporablja vrednosti teme za barve ozadja in pisave.

Slabosti uporabe oblikovanih komponent

Čeprav ima uporaba knjižnice stiliziranih komponent številne prednosti, ima tudi slabosti.

Ni neodvisno od ogrodja

Pisanje CSS v JS pomeni, da bo ločevanje obeh v prihodnosti težko, kar je grozno za vzdrževanje. Na primer, če se kdaj odločite zamenjati svojega ogrodje JavaScript, boste morali prepisati večino kodne baze.

To je dolgotrajno in drago. Uporaba CSS moduli ali pa je okvirno neodvisna knjižnica, kot je emotion, bolj odporna na prihodnost.

Lahko je težko brati

Razlikovanje med komponentami styled in React je lahko težavno, zlasti zunaj sistema atomičnega oblikovanja. Razmislite o tem primeru:

<Glavni>
<Nav>
<ListItem>
<LinkText>Posvoji hišnega ljubljenčka</LinkText>
</ListItem>
<ListItem>
<LinkText>Donirajte</LinkText>
</ListItem>
</Nav>
<Glava>Posvoji, don't trgovina!</Header>
<SecondaryBtn btnText="Donirajte" />
</Main>

Edini način, da vemo, katera komponenta vsebuje poslovno logiko, je, da preverimo, ali ima rekvizite. Poleg tega, čeprav so imena komponent v tem primeru opisna, jih je še vedno težko vizualizirati.

Na primer, komponenta Glava je lahko naslov, vendar če ne preverite slogov, morda nikoli ne boste vedeli, ali je h1, h2 ali h3.

Nekateri razvijalci to težavo rešujejo tako, da kot ovoj uporabljajo samo stilizirano komponento in uporabljajo semantične oznake HTML za elemente v njej.

V tem primeru bi lahko komponenta glave uporabljala oznako h1.

<h1>Posvoji, don't trgovina!</h1>

To lahko naredite še naprej tako, da definirate komponente s slogom v drugi datoteki (npr. styled.js), ki jo lahko pozneje uvozite v komponento React.

uvoz * kot Stilizirano od './styled'
// uporabi styled.components
<stilizirano. Glavni>
// Koda
</styled.Main>

S tem dobite jasen pogled na to, katere komponente so stilizirane in katere komponente React.

Slogirane komponente se prevedejo med izvajanjem

Za aplikacije, ki uporabljajo stilizirane komponente, brskalnik prenese CSS in ga razčleni z uporabo JavaScripta, preden jih vstavi na stran. To povzroča težave z zmogljivostjo, ker mora uporabnik pri začetnem nalaganju prenesti veliko JavaScripta.

Statični CSS je veliko hitrejši. Ni ga treba obdelati, preden ga brskalnik uporabi za oblikovanje strani. Vendar se knjižnica stiliziranih komponent izboljšuje z vsako izdajo. Če si lahko privoščite nekoliko zmanjšano zmogljivost, jo uporabite.

Kdaj uporabiti stilizirane komponente

Nekateri razvijalci radi pišejo CSS v datotekah JS, medtem ko imajo drugi raje ločene datoteke CSS. Kako se boste odločili za pisanje CSS, bi moralo biti na koncu odvisno od samega projekta in tega, kaj je všeč vam ali vaši ekipi. Komponente s slogom so dobra izbira za izdelavo knjižnice uporabniškega vmesnika, saj je vse lahko v eni datoteki in se zlahka izvozi in ponovno uporabi.

Če raje pišete čisti CSS, uporabite module CSS. Lahko imate ločene datoteke CSS in privzeto lokalno obsega sloge. Ne glede na to, kakšno izbiro boste izbrali, je nujno imeti dobro znanje o CSS.