CSS-in-JS teegid, nagu ka stiiliga komponendid, on viimastel aastatel muutunud populaarsemaks. Need kapseldavad CSS-i komponendi tasemele ja võimaldavad teil korduvkasutatavate stiilide määratlemiseks kasutada JavaScripti.

Stiilitud komponente kasutades saate säilitada komponendipõhise arhitektuuri, mida React juba tugevdab. Kuid raamatukogul on ka varjukülgi.

Kuidas stiilsed komponendid töötavad

The stiililised komponendid CSS-in-JS teek võimaldab teil kirjutada CSS-i oma komponentfailidesse. Selle süntaks on sama, mis CSS-il, nii et seda on üsna lihtne kätte saada. See on ideaalne kesktee JavaScripti arendajatele, kes kipuvad puhtast CSS-ist eemale hoidma.

Selle toimimise nägemiseks kaaluge järgmist Pealkirja komponenti, mis renderdab h1 elemendi.

konst Pealkiri = styled.h1`
fondi suurus: 1.5em;
 teksti joondamine: keskel;
 värv: punane;
`;

Saate seda komponenti kasutada nagu kõiki teisi Reacti komponente.

konst Kodu = () => {
tagasi (
<Pealkiri>Stiilis komponendi pealkiri</Title>
	)
}

See on ka väga võimas, sest muudab rekvisiitide ja olekuga töötamise lihtsamaks.

instagram viewer

Näiteks selle komponendi värv ja taust sõltuvad rekvisiitidest.

importida stiilis alates "stiilis komponendid";
konst Nupp = stiiliga.nupp`
polsterdus: 0.8rem 1.6rem;
 taustavärv: ${(rekvisiidid) => (props.primary? "lilla": "valge")};
 piir: 1px tahke #00000;
 värv: ${(rekvisiidid) => (props.primary? "valge": "lilla")};
`;
eksportidavaikimisifunktsiooniKodu() {
 tagasi <Nupu esmane>Esmane</Button>
}

Stiilitud komponentide puhul ei pea te rekvisiite käsitsi CSS-ile edastama. See on automaatselt saadaval, lihtsustades kirjutamisstiile, mis sõltuvad komponendi andmetest.

Stiilikomponentide kasutamise plussid

Siin on mõned stiilikomponentide teegi kasutamise eelised.

See lahendab CSS-i spetsiifilisuse probleemid

Stiilitud komponendid kõrvaldavad spetsiifilisuse probleemid, kuna see kapseldab CSS-i komponendi sisse. See tähendab, et te ei pea muretsema klassinimede kokkupõrkumise pärast või selle pärast, et teie kasutajaliides muutub klassinimede kokkupõrkest tingitud segadusse.

Võimaldab teil kirjutada CSS-i komponentide sees

Nagu näha nupukomponendi näitest, võimaldab stiiliga komponendid kombineerida CSS-i ja JS-i samas failis. Seega ei pea te looma eraldi CSS-faili ega pidevalt faililt failile vahetama.

See on kasutajaliidese komplektide loomisel tohutu eelis, kuna salvestate kõik komponentide funktsioonid ühte faili.

Peale selle CSS-i kirjutamine komponentide sees. See muudab rekvisiitide ja olekute jagamise stiilidega lihtsamaks.

Võimaldab tüübikontrolli

Stiiliga komponentide abil saate tüübikontrollida oma stiilides kasutatud rekvisiite ja väärtusi. Näiteks saate ülaltoodud nupukomponendi TypeScripti abil ümber kirjutada.

liidesrekvisiidid{
 esmane: tõeväärtus
}
const Button = stiilitud.nupp<rekvisiidid>`
polsterdus: 0.8rem 1.6rem;
 taustavärv: ${(rekvisiidid) => (props.primary? "lilla": "valge")};
 piir: 1px tahke #00000;
 värv: ${(rekvisiidid) => (props.primary? "valge": "lilla")};
`;

TypeScripti kasutamine komponendis tähendab tüübivigade kontrollimist kodeerimisel ja silumisaja lühendamist.

Toetab Theming Out of Box

Tumeda teema lisamine või mõni muu teie rakenduse teema võib olla keeruline ja aeganõudev. Kuid Styled komponendid lihtsustavad protsessi. Saate lisada oma rakendusele teemasid, eksportides a ümbriskomponent.

konst Nupp = styled.main`
 taustavärv: ${props => props.theme.light.background};
 värv: ${rekvisiidid => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Nupp>
 Valguse nupp
</Button>
</ThemeProvider>

Komponent ThemeProvider edastab teemad kõikidele kujundatud komponentidele, mida see ümbritseb. Need komponendid saavad seejärel kasutada teema väärtusi oma stiilides. Selles näites kasutab nupp tausta ja fondi värvide teema väärtusi.

Stiilikomponentide kasutamise miinused

Kuigi stiilikomponentide teegi kasutamisel on palju eeliseid, on sellel ka puudusi.

See ei ole raamistikust sõltumatu

CSS-i kirjutamine JS-is tähendab, et nende kahe eraldamine on tulevikus keeruline, mis on hooldatavuse jaoks kohutav. Näiteks kui otsustate kunagi oma JavaScripti raamistik, peate suurema osa oma koodibaasist ümber kirjutama.

See on aeganõudev ja kulukas. Kasutades CSS moodulid või raamistikust sõltumatu raamatukogu nagu emotsioon on tulevikukindlam.

Seda võib olla raske lugeda

Stiili ja Reacti komponentide eristamine võib olla keeruline, eriti väljaspool aatomikujundussüsteemi. Mõelge sellele näitele:

<Peamine>
<Nav>
<Loendiüksus>
<Lingi tekst>Võtke lemmikloom</LinkText>
</ListItem>
<Loendiüksus>
<Lingi tekst>Anneta</LinkText>
</ListItem>
</Nav>
<Päis>Adopteeri, ära't poodi!</Header>
<SecondaryBtn btnText="Anneta" />
</Main>

Ainus viis teada saada, milline komponent sisaldab äriloogikat, on kontrollida, kas sellel on rekvisiite. Pealegi, kuigi selle näite komponentide nimed on kirjeldavad, on neid siiski raske visualiseerida.

Näiteks võib päise komponent olla pealkiri, kuid kui te stiile ei kontrolli, ei pruugi te kunagi teada, kas see on h1, h2 või h3.

Mõned arendajad lahendavad selle probleemi, kasutades ümbrisena ainult stiilikomponenti ja selle sees olevate elementide jaoks semantilisi HTML-märgendeid.

Selles näites võib päisekomponent kasutada märgendit h1.

<h1>Adopteeri, ära't poodi!</h1>

Saate seda edasi viia, määratledes stiiliga komponendid teises failis (nt styled.js), mille saate hiljem importida Reacti komponenti.

importida * nagu Stiilitud alates './stiilis'
// kasuta styled.components
<stiilis. Peamine>
// kood
</styled.Main>

Seda tehes saate selge ülevaate sellest, millised komponendid on kujundatud ja millised on Reacti komponendid.

Stiilitud komponendid koostatakse käitusajal

Stiilikomponente kasutavate rakenduste puhul laadib brauser CSS-i alla ja sõelub selle JavaScripti abil enne nende lehele sisestamist. See põhjustab jõudlusprobleeme, kuna kasutaja peab alglaadimisel alla laadima palju JavaScripti.

Staatiline CSS on palju kiirem. Seda ei ole vaja töödelda enne, kui brauser kasutab seda lehtede stiilimiseks. Stiilikomponentide teek paraneb aga iga väljalaskega. Kui saate endale lubada väiksemat jõudlust, kasutage seda.

Millal kasutada stiilseid komponente

Mõned arendajad naudivad CSS-i kirjutamist JS-failides, samas kui teised eelistavad eraldi CSS-faile. See, kuidas valite CSS-i kirjutamise, peaks lõppkokkuvõttes sõltuma projektist endast ja sellest, mis teile või teie meeskonnale meeldib. Stiilitud komponendid on hea valik kasutajaliidese teegi koostamiseks, kuna kõik saab olla ühes failis ning seda on lihtne eksportida ja uuesti kasutada.

Kui eelistate kirjutada puhast CSS-i, kasutage CSS-i mooduleid. Teil võivad olla eraldi CSS-failid ja see hõlmab vaikimisi stiile. Olenemata sellest, millise valiku teete, on kindlad CSS-i teadmised hädavajalikud.