CSS-in-JS bibliotekos, kaip ir stiliaus komponentai, pastaraisiais metais išpopuliarėjo. Jie apima CSS iki komponento lygio ir leidžia naudoti „JavaScript“ pakartotinai naudojamiems stiliams apibrėžti.

Naudodami stilizuotus komponentus galite išlaikyti komponentais pagrįstą architektūrą, kurią „React“ jau sustiprina. Tačiau biblioteka turi ir minusų.

Kaip veikia stilizuoti komponentai

The stiliaus komponentai CSS-in-JS biblioteka leidžia rašyti CSS komponentų failuose. Jo sintaksė yra tokia pati kaip CSS, todėl ją gana lengva pasiimti. Tai puikus vidurys „JavaScript“ kūrėjams, kurie linkę laikytis atokiau nuo gryno CSS.

Norėdami pamatyti, kaip tai veikia, apsvarstykite šį pavadinimo komponentą, kuris pateikia elementą h1.

konst Pavadinimas = stilizuotas.h1`
šrifto dydis: 1.5 em;
 teksto lygiavimas: centre;
 spalva: raudona;
`;

Šį komponentą galite naudoti kaip ir bet kurį kitą React komponentą.

konst Pagrindinis puslapis = () => {
grąžinti (
<Pavadinimas>Stiliaus komponento antraštė</Title>
	)
}

Jis taip pat labai galingas, nes palengvina darbą su rekvizitais ir būsena.

instagram viewer

Pavyzdžiui, šio komponento spalva ir fonas priklauso nuo rekvizitų.

importuoti stiliaus iš „stiliuotieji komponentai“;
konst Mygtukas = stilizuotas.mygtukas`
kamšalas: 0.8rem 1.6rem;
 fono spalva: ${(rekvizitai) => (props.primary? "violetinė": "baltas")};
 kraštinė: 1px kietas #00000;
 spalva: ${(rekvizitai) => (props.primary? "baltas": "violetinė")};
`;
eksportuotinumatytasfunkcijaNamai() {
 grąžinti <Pagrindinis mygtukas>Pirminis</Button>
}

Naudojant stiliaus komponentus, jums nereikia rankiniu būdu perduoti rekvizitų į CSS. Jis pasiekiamas automatiškai, todėl supaprastinami rašymo stiliai, priklausantys nuo komponento duomenų.

Stilių komponentų naudojimo privalumai

Štai keletas stiliaus komponentų bibliotekos naudojimo pranašumų.

Jis išsprendžia CSS specifiškumo problemas

Stilizuoti komponentai pašalina specifiškumo problemas, nes CSS įterpiamas į komponentą. Tai reiškia, kad jums nereikės nerimauti, kad klasių pavadinimai susikirs arba jūsų vartotojo sąsaja pavirs netvarka dėl klasės pavadinimų susidūrimų.

Leidžia rašyti CSS vidinius komponentus

Kaip matyti iš mygtuko komponento pavyzdžio, stiliaus komponentai leidžia sujungti CSS ir JS tame pačiame faile. Taigi, jums nereikia kurti atskiro CSS failo ar nuolat perjungti iš failo į failą.

Tai didžiulis pranašumas kuriant vartotojo sąsajos rinkinius, nes visas komponentų funkcijas saugote viename faile.

Išskyrus tai, CSS rašymas komponentų viduje. Tai leidžia lengviau dalytis rekvizitais ir būsenomis su stiliais.

Leidžia tikrinti tipą

Naudodami stilizuotus komponentus galite patikrinti savo stiliuose naudojamus rekvizitus ir vertes. Pavyzdžiui, galite perrašyti aukščiau esantį mygtuko komponentą naudodami „TypeScript“.

sąsajarekvizitai{
 pagrindinis: loginis
}
const Mygtukas = stilizuotas.mygtukas<rekvizitai>`
kamšalas: 0.8rem 1.6rem;
 fono spalva: ${(rekvizitai) => (props.primary? "violetinė": "baltas")};
 kraštinė: 1px kietas #00000;
 spalva: ${(rekvizitai) => (props.primary? "baltas": "violetinė")};
`;

„TypeScript“ naudojimas komponente reiškia tikrinti tipo klaidas koduojant ir sutrumpinti derinimo laiką.

Palaiko temą iš karto

Tamsios temos pridėjimas ar bet kuri kita jūsų paraiškos tema gali būti sudėtinga ir atimti daug laiko. Tačiau Styled komponentai supaprastina procesą. Galite pridėti temų prie programos eksportuodami a vyniojimo komponentas.

konst Mygtukas = styled.main`
 fono spalva: ${rekvizitas => props.theme.light.background};
 spalva: ${rekvizitas => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Mygtukas>
 Šviesos mygtukas
</Button>
</ThemeProvider>

Komponentas „ThemeProvider“ perduoda temas visiems stiliaus komponentams, kuriuos jis apvynioja. Tada šie komponentai gali naudoti temos reikšmes savo stiliuose. Šiame pavyzdyje mygtukas naudoja fono ir šrifto spalvų temos reikšmes.

Stilių komponentų naudojimo trūkumai

Stilių komponentų bibliotekos naudojimas turi daug privalumų, tačiau turi ir trūkumų.

Tai nėra nepriklausoma nuo sistemos

CSS rašymas JS reiškia, kad ateityje bus sunku juos atskirti, o tai baisu dėl priežiūros. Pavyzdžiui, jei kada nors nuspręsite pakeisti savo JavaScript sistema, turėsite perrašyti didžiąją dalį kodų bazės.

Tai užima daug laiko ir kainuoja. Naudojant CSS moduliai arba nepriklausoma biblioteka, tokia kaip emocijos, yra labiau tinkama ateičiai.

Gali būti sunku skaityti

Atskirti stilizuotus ir „React“ komponentus gali būti sunku, ypač už atominės projektavimo sistemos ribų. Apsvarstykite šį pavyzdį:

<Pagrindinis>
<Nav>
<Sąrašo elementas>
<Nuorodos tekstas>Priimkite augintinį</LinkText>
</ListItem>
<Sąrašo elementas>
<Nuorodos tekstas>Paaukoti</LinkText>
</ListItem>
</Nav>
<Antraštė>Įvaikink, ne't parduotuvė!</Header>
<SecondaryBtn btnText="Paaukoti" />
</Main>

Vienintelis būdas sužinoti, kuriame komponente yra verslo logika, yra patikrinti, ar jis turi rekvizitus. Be to, nors komponentų pavadinimai šiame pavyzdyje yra aprašomieji, vis tiek sunku juos įsivaizduoti.

Pavyzdžiui, antraštės komponentas gali būti antraštė, bet jei nepatikrinsite stilių, niekada nesužinosite, ar tai h1, h2 ar h3.

Kai kurie kūrėjai išsprendžia šią problemą, naudodami tik stiliaus komponentą kaip įvyniojimą ir naudodami semantines HTML žymas jame esantiems elementams.

Šiame pavyzdyje antraštės komponentas gali naudoti h1 žymą.

<h1>Įvaikink, ne't parduotuvė!</h1>

Galite tai padaryti toliau, apibrėždami stiliaus komponentus kitame faile (pvz., styled.js), kurį vėliau galėsite importuoti į React komponentą.

importuoti * kaip Stilingas iš „./styled“
// naudoti styled.components
<stiliaus. Pagrindinis>
// kodas
</styled.Main>

Tai darydami aiškiai matote, kurie komponentai yra stilizuoti, o kurie yra „React“ komponentai.

Stilizuoti komponentai sudaromi vykdymo metu

Programoms, kurios naudoja stiliaus komponentus, naršyklė atsisiunčia CSS ir išanalizuoja jį naudodama „JavaScript“, prieš įvesdama juos į puslapį. Dėl to kyla našumo problemų, nes pradinio įkėlimo metu vartotojas turi atsisiųsti daug JavaScript.

Statinis CSS yra daug greitesnis. Jo nereikia apdoroti, kol naršyklė nenaudoja puslapių stiliui. Tačiau stilizuotų komponentų biblioteka tobulėja su kiekvienu leidimu. Jei galite sau leisti sumažinti našumą, pirmyn ir naudokite jį.

Kada naudoti stilingus komponentus

Kai kurie kūrėjai mėgsta rašyti CSS JS failais, o kiti nori turėti atskirus CSS failus. Tai, kaip pasirinksite rašyti CSS, galiausiai turėtų priklausyti nuo paties projekto ir nuo to, kas jums ar jūsų komandai patinka. Stilizuoti komponentai yra geras pasirinkimas kuriant vartotojo sąsajos biblioteką, nes viskas gali būti viename faile ir lengvai eksportuojama bei naudojama pakartotinai.

Jei norite rašyti gryną CSS, naudokite CSS modulius. Galite turėti atskirus CSS failus ir pagal numatytuosius nustatymus jis aprėpia stilius vietoje. Nepriklausomai nuo pasirinkimo, labai svarbu turėti tvirtų CSS žinių.