Bibliotecile CSS-in-JS, precum componentele cu stil, au devenit mai populare în ultimii ani. Acestea încapsulează CSS până la nivelul componentelor și vă permit să utilizați JavaScript pentru a defini stiluri reutilizabile.

Folosind componente cu stil, puteți menține arhitectura bazată pe componente pe care React o întărește deja. Dar biblioteca are și unele dezavantaje.

Cum funcționează componentele stilate

The componente-stilizate Biblioteca CSS-in-JS vă permite să scrieți CSS în fișierele componente. Sintaxa sa este aceeași cu CSS, așa că este destul de ușor de preluat. Este o cale de mijloc perfectă pentru dezvoltatorii JavaScript care tind să stea departe de CSS pur.

Pentru a vedea cum funcționează, luați în considerare următoarea componentă Title care redă un element h1.

const Titlu = stilat.h1`
marimea fontului: 1.5em;
 text-align: centru;
 culoarea rosie;
`;

Puteți utiliza această componentă ca orice altă componentă React.

const Acasă = () => {
întoarcere (
<Titlu>Un titlu de componentă cu stil</Title>
	)
}
instagram viewer

Este, de asemenea, foarte puternic, deoarece facilitează lucrul cu recuzită și stare.

De exemplu, culoarea și fundalul acestei componente depind de recuzită.

import stilizat din „componente-stilizate”;
const Button = stilat.button`
căptușeală: 0.8rem 1.6rem;
 culoare de fundal: ${(recuzită) => (recuzită.primar? "Violet": "alb")};
 frontieră: 1px solid #00000;
 culoare: ${(recuzită) => (recuzită.primar? "alb": "Violet")};
`;
exportMod implicitfuncţieAcasă() {
 întoarcere <Buton primar>Primar</Button>
}

Cu componentele stilate, nu trebuie să treceți manual recuzita către CSS. Este disponibil automat, simplificând stilurile de scriere care depind de datele din componentă.

Avantajele utilizării componentelor cu stil

Iată câteva avantaje ale utilizării bibliotecii de componente cu stil.

Rezolvă probleme de specificitate CSS

Componentele stilate elimină problemele de specificitate, deoarece încapsulează CSS în interiorul unei componente. Acest lucru înseamnă că nu trebuie să vă faceți griji cu privire la ciocnirea numelor de clasă sau la transformarea interfeței dvs. într-o mizerie din cauza ciocnirilor de nume de clasă.

Vă permite să scrieți CSS în interiorul componentelor

După cum se vede din exemplul de componentă a butonului, componentele stilate vă permit să combinați CSS și JS în același fișier. Deci, nu trebuie să creați un fișier CSS separat sau să continuați să treceți de la un fișier la altul.

Acesta este un avantaj imens atunci când creați kituri UI, deoarece stocați toate funcționalitățile componentelor într-un singur fișier.

În afară de asta, scrierea CSS în interiorul componentelor. Face mai ușor să partajați recuzită și stări cu stiluri.

Permite verificarea tipului

Cu componentele stilizate, puteți verifica tipul de recuzită și valorile utilizate în stilurile dvs. De exemplu, puteți rescrie componenta butonului de mai sus folosind TypeScript.

interfatarecuzită{
 primar: boolean
}
const Button = stilat.button<recuzită>`
căptușeală: 0.8rem 1.6rem;
 culoare de fundal: ${(recuzită) => (recuzită.primar? "Violet": "alb")};
 frontieră: 1px solid #00000;
 culoare: ${(recuzită) => (recuzită.primar? "alb": "Violet")};
`;

Folosind TypeScript în componentă înseamnă verificarea erorilor de tip pe măsură ce codificați și reducerea timpului de depanare.

Sprijină tematizarea din cutie

Adăugarea unei teme întunecate sau orice altă temă a aplicației dvs. poate fi dificilă și consumatoare de timp. Cu toate acestea, componentele Styled simplifică procesul. Puteți adăuga teme în aplicația dvs. exportând a componenta de ambalare.

const Buton = stilat.principal`
 culoare de fundal: ${props => props.theme.light.background};
 culoare: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Buton>
 Buton de lumină
</Button>
</ThemeProvider>

Componenta ThemeProvider transmite temele tuturor componentelor stilizate pe care le înfășoară. Aceste componente pot folosi apoi valorile temei în stilurile lor. În acest exemplu, butonul utilizează valorile temei pentru culorile de fundal și font.

Contra utilizării componentelor cu stil

În timp ce utilizarea bibliotecii de componente cu stil are multe beneficii, are și dezavantaje.

Nu este independent de cadru

Scrierea CSS în JS înseamnă că separarea celor două în viitor va fi dificilă, ceea ce este teribil pentru mentenanță. De exemplu, dacă decideți vreodată să vă schimbați cadru JavaScript, va trebui să rescrieți cea mai mare parte a bazei de cod.

Acest lucru necesită timp și este costisitor. Folosind module CSS sau o bibliotecă independentă de cadru, cum ar fi emoția, este mai pregătită pentru viitor.

Poate fi greu de citit

Diferențierea dintre componentele stilate și cele React poate fi dificilă, mai ales în afara unui sistem de proiectare atomică. Luați în considerare acest exemplu:

<Principal>
<Nav>
<ListItem>
<LinkText>Adoptă un animal de companie</LinkText>
</ListItem>
<ListItem>
<LinkText>Donează</LinkText>
</ListItem>
</Nav>
<Antet>Adoptă, don'la magazin!</Header>
<SecondaryBtn btnText="Donează" />
</Main>

Singura modalitate de a ști care componentă conține logica de afaceri este prin verificarea dacă are recuzită. În plus, chiar dacă numele componentelor din acest exemplu sunt descriptive, este încă dificil să le vizualizați.

De exemplu, componenta Antet poate fi un titlu, dar dacă nu verificați stilurile, este posibil să nu știți niciodată dacă este un h1, h2 sau h3.

Unii dezvoltatori rezolvă această problemă folosind doar componenta cu stil ca un wrapper și folosind etichetele HTML semantice pentru elementele din interiorul acesteia.

În acest exemplu, componenta antet ar putea folosi o etichetă h1.

<h1>Adoptă, don'la magazin!</h1>

Puteți duce acest lucru mai departe definind componentele stilate într-un alt fișier (de exemplu, styled.js), pe care îl puteți importa ulterior într-o componentă React.

import * la fel de Stilizat din './styled'
// folosiți styled.components
<stilizat. Principal>
// cod
</styled.Main>

Acest lucru vă oferă o vedere clară a componentelor care sunt stilate și care sunt componente React.

Componentele cu stil sunt compilate în timpul execuției

Pentru aplicațiile care folosesc componente cu stil, browserul descarcă CSS-ul și îl analizează folosind JavaScript înainte de a le injecta în pagină. Acest lucru cauzează probleme de performanță, deoarece utilizatorul trebuie să descarce o mulțime de JavaScript în încărcarea inițială.

CSS static este mult mai rapid. Nu trebuie să fie procesat înainte ca browserul să îl folosească pentru a stila paginile. Cu toate acestea, biblioteca de componente cu stil se îmbunătățește cu fiecare lansare. Dacă vă puteți permite o performanță redusă, mergeți mai departe și folosiți-l.

Când să folosiți componentele stilate

Unii dezvoltatori le place să scrie CSS în fișiere JS, în timp ce alții preferă să aibă fișiere CSS separate. Modul în care alegeți să scrieți CSS ar trebui să depindă în cele din urmă de proiectul în sine și de ceea ce vă place dumneavoastră sau echipei dvs. Componentele stilate sunt o alegere bună pentru construirea unei biblioteci UI, deoarece totul poate fi într-un singur fișier și poate fi ușor exportat și reutilizat.

Dacă preferați să scrieți CSS pur, utilizați module CSS. Puteți avea fișiere CSS separate și, în mod implicit, stabilește stilurile la nivel local. Indiferent de alegerea pe care o faci, este esențial să ai cunoștințe solide CSS.