CSS-in-JS bibliotēkas, tāpat kā veidoti komponenti, pēdējos gados ir kļuvušas populārākas. Tie iekapsulē CSS līdz komponentu līmenim un ļauj izmantot JavaScript, lai definētu atkārtoti lietojamus stilus.
Izmantojot stilizētus komponentus, varat uzturēt uz komponentiem balstītu arhitektūru, ko React jau pastiprina. Bet bibliotēkai ir arī daži trūkumi.
Kā darbojas stilizēti komponenti
The stilizētas sastāvdaļas CSS-in-JS bibliotēka ļauj rakstīt CSS jūsu komponentu failos. Tā sintakse ir tāda pati kā CSS, tāpēc to ir diezgan viegli uztvert. Tas ir ideāls vidusceļš JavaScript izstrādātājiem, kuri mēdz atturēties no tīra CSS.
Lai redzētu, kā tas darbojas, apsveriet šo Title komponentu, kas atveido h1 elementu.
konst Virsraksts = styled.h1`
fonta izmērs: 10,5 em;
teksta līdzināšana: centrs;
krāsa: sarkana;
`;
Jūs varat izmantot šo komponentu tāpat kā jebkuru citu React komponentu.
konst Sākums = () => {
atgriezties (
<Nosaukums>Stilizēts komponenta virsraksts</Title>
)
}
Tas ir arī ļoti spēcīgs, jo tas atvieglo darbu ar rekvizītiem un stāvokli.
Piemēram, šī komponenta krāsa un fons ir atkarīgi no balstiem.
imports stilizēts no "veidotie komponenti";konst Poga = styled.button`
polsterējums: 0.8rem 1.6rem;
fona krāsa: ${(rekvizīti) => (props.primary? "violets": "balts")};
robeža: 1px ciets #00000;
krāsa: ${(rekvizīti) => (props.primary? "balts": "violets")};
`;
eksportētnoklusējumafunkcijuMājas() {
atgriezties <Pogas primārais>Primārs</Button>
}
Izmantojot stila komponentus, jums nav manuāli jānodod rekvizīti CSS. Tas ir automātiski pieejams, vienkāršojot rakstīšanas stilus, kas ir atkarīgi no komponenta datiem.
Stilētu komponentu izmantošanas plusi
Šeit ir dažas stila komponentu bibliotēkas izmantošanas priekšrocības.
Tas atrisina CSS specifikas problēmas
Stilizētie komponenti novērš specifiskuma problēmas, jo tie iekapsulē CSS komponentā. Tas nozīmē, ka jums nav jāuztraucas par klašu nosaukumu sadursmi vai jūsu lietotāja interfeisu, kas var pārvērsties par haosu klases nosaukumu sadursmju dēļ.
Ļauj rakstīt CSS iekšējos komponentus
Kā redzams no pogas komponenta piemēra, stila komponenti ļauj apvienot CSS un JS vienā failā. Tātad jums nav jāizveido atsevišķs CSS fails vai nepārtraukti jāpārslēdzas no faila uz failu.
Tā ir milzīga priekšrocība, veidojot lietotāja interfeisa komplektus, jo visas komponentu funkcijas tiek saglabātas vienā failā.
Izņemot to, CSS rakstīšana komponentos. Tas atvieglo rekvizītu un stāvokļu kopīgošanu ar stiliem.
Ļauj pārbaudīt tipu
Izmantojot stilizētos komponentus, varat pārbaudīt jūsu stilos izmantotos rekvizītus un vērtības. Piemēram, varat pārrakstīt iepriekš esošo pogas komponentu, izmantojot TypeScript.
saskarnerekvizīti{
primārs: Būla
}
const Poga = styled.button<rekvizīti>`
polsterējums: 0.8rem 1.6rem;
fona krāsa: ${(rekvizīti) => (props.primary? "violets": "balts")};
robeža: 1px ciets #00000;
krāsa: ${(rekvizīti) => (props.primary? "balts": "violets")};
`;
TypeScript izmantošana komponentā nozīmē, ka kodēšanas laikā jāpārbauda tipa kļūdas un jāsamazina atkļūdošanas laiks.
Atbalsta Theming Out of Box
Tumšas tēmas pievienošana vai jebkura cita tēma jūsu pieteikumā var būt sarežģīta un laikietilpīga. Tomēr Styled komponenti vienkāršo procesu. Varat savai lietotnei pievienot motīvus, eksportējot a
konst Poga = styled.main`
fona krāsa: ${rekvizīti => props.theme.light.background};
krāsa: ${rekvizīti => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Poga>
Gaismas poga
</Button>
</ThemeProvider>
Komponents ThemeProvider nodod motīvus visiem stilizētajiem komponentiem, ko tas iesaiņo. Pēc tam šie komponenti var izmantot motīvu vērtības savos stilos. Šajā piemērā poga izmanto motīvu vērtības fona un fonta krāsām.
Stilētu komponentu izmantošanas mīnusi
Lai gan stila komponentu bibliotēkas izmantošanai ir daudz priekšrocību, tai ir arī trūkumi.
Tas nav ietvars neatkarīgs
CSS rakstīšana JS valodā nozīmē, ka turpmāk būs grūti nošķirt abus, kas ir briesmīgi uzturēšanas ziņā. Piemēram, ja kādreiz nolemjat mainīt savu JavaScript ietvars, jums būs jāpārraksta lielākā daļa kodu bāzes.
Tas ir laikietilpīgi un dārgi. Izmantojot CSS moduļi vai neatkarīga bibliotēka, piemēram, emocijas, ir vairāk piemērota nākotnei.
To var būt grūti lasīt
Stilizēto un React komponentu atšķiršana var būt sarežģīta, īpaši ārpus atomu dizaina sistēmas. Apsveriet šo piemēru:
<Galvenā>
<Nav>
<ListItem>
<Saites teksts>Adoptējiet mājdzīvnieku</LinkText>
</ListItem>
<ListItem>
<Saites teksts>Ziedot</LinkText>
</ListItem>
</Nav>
<Virsraksts>Adoptējiet, don't veikals!</Header>
<SecondaryBtn btnText="Ziedot" />
</Main>
Vienīgais veids, kā uzzināt, kurš komponents satur biznesa loģiku, ir pārbaudīt, vai tam ir rekvizīti. Turklāt, lai gan komponentu nosaukumi šajā piemērā ir aprakstoši, joprojām ir grūti tos vizualizēt.
Piemēram, galvenes komponents var būt virsraksts, taču, ja nepārbaudīsit stilus, iespējams, nekad nezināt, vai tas ir h1, h2 vai h3.
Daži izstrādātāji atrisina šo problēmu, tikai izmantojot stila komponentu kā iesaiņojumu un izmantojot semantiskos HTML tagus tajā esošajiem elementiem.
Šajā piemērā galvenes komponents varētu izmantot h1 tagu.
<h1>Adoptējiet, don't veikals!</h1>
Varat to turpināt, definējot stilizētos komponentus citā failā (piemēram, styled.js), ko vēlāk varat importēt React komponentā.
imports * kā Stilizēts no './styled'
// izmantot styled.components
<stilizēts. Galvenā>
// kods
</styled.Main>
Tas sniedz skaidru priekšstatu par to, kuri komponenti ir veidoti un kuri ir React komponenti.
Stilizētie komponenti tiek apkopoti izpildlaikā
Lietojumprogrammām, kurās tiek izmantoti stilizēti komponenti, pārlūkprogramma lejupielādē CSS un parsē to, izmantojot JavaScript, pirms tos ievada lapā. Tas rada veiktspējas problēmas, jo lietotājam sākotnējā ielādes laikā ir jālejupielādē daudz JavaScript.
Statiskais CSS ir daudz ātrāks. Tas nav jāapstrādā, pirms pārlūkprogramma to izmanto lapu stila veidošanai. Tomēr stila komponentu bibliotēka tiek uzlabota ar katru izlaidumu. Ja varat atļauties samazinātu veiktspēju, izmantojiet to.
Kad izmantot stilizētus komponentus
Dažiem izstrādātājiem patīk rakstīt CSS JS failos, savukārt citi dod priekšroku atsevišķiem CSS failiem. Tas, kā izvēlaties rakstīt CSS, galu galā ir atkarīgs no paša projekta un no tā, kas jums vai jūsu komandai patīk. Stilizēti komponenti ir laba izvēle lietotāja interfeisa bibliotēkas izveidei, jo viss var būt vienā failā un to var viegli eksportēt un izmantot atkārtoti.
Ja vēlaties rakstīt tīru CSS, izmantojiet CSS moduļus. Jums var būt atsevišķi CSS faili, un pēc noklusējuma tas lokāli aptver stilus. Neatkarīgi no jūsu izvēles ir ļoti svarīgas stabilas CSS zināšanas.
