CSS-in-JS-kirjastot, kuten tyylilliset komponentit, ovat yleistyneet viime vuosina. Ne kapseloivat CSS: n komponenttitasolle ja antavat sinun käyttää JavaScriptiä uudelleenkäytettävien tyylien määrittämiseen.

Tyylistettujen komponenttien avulla voit ylläpitää komponenttiohjattua arkkitehtuuria, jota React jo vahvistaa. Mutta kirjastolla on myös huonoja puolia.

Miten tyylitellyt komponentit toimivat

The tyyliset komponentit CSS-in-JS-kirjaston avulla voit kirjoittaa CSS: ää komponenttitiedostoihisi. Sen syntaksi on sama kuin CSS: n, joten se on melko helppo poimia. Se on täydellinen keskitie JavaScript-kehittäjille, jotka pyrkivät pysymään erossa puhtaasta CSS: stä.

Jos haluat nähdä, miten se toimii, harkitse seuraavaa Title-komponenttia, joka hahmontaa h1-elementin.

konst Otsikko = styled.h1`
Fonttikoko: 1.5em;
 tekstin tasaus: keskellä;
 väri punainen;
`;

Voit käyttää tätä komponenttia kuten mitä tahansa muuta React-komponenttia.

konst Etusivu = () => {
palata (
<Otsikko>Tyylillinen komponenttiotsikko</Title>
	)
}

Se on myös erittäin tehokas, koska sen avulla on helpompi työskennellä rekvisiitta ja tilan kanssa.

Esimerkiksi tämän komponentin väri ja tausta riippuvat rekvisiittasta.

tuonti tyylistä alkaen "tyylilliset komponentit";
konst Button = styled.button`
pehmuste: 0.8rem 1.6rem;
 taustaväri: ${(rekvisiitta) => (props.primary? "violetti": "valkoinen")};
 raja: 1px kiinteä #00000;
 väri: ${(rekvisiitta) => (props.primary? "valkoinen": "violetti")};
`;
viedäoletuksenatoimintoKoti() {
 palata <Painike ensisijainen>Ensisijainen</Button>
}

Tyylistetyillä komponenteilla sinun ei tarvitse siirtää rekvisiittaa manuaalisesti CSS: ään. Se on automaattisesti saatavilla, mikä yksinkertaistaa kirjoitustyylejä, jotka riippuvat komponentin tiedoista.

Tyyliteltyjen komponenttien käytön plussat

Tässä on joitain tyyliteltyjen komponenttien kirjaston käytön etuja.

Se ratkaisee CSS-spesifisyysongelmia

Tyylilliset komponentit poistavat spesifisyysongelmat, koska ne kapseloivat CSS: n komponentin sisään. Tämä tarkoittaa, että sinun ei tarvitse huolehtia luokkanimien ristiriitoja tai käyttöliittymän muuttumisesta sotkuksi luokan nimien ristiriitojen vuoksi.

Mahdollistaa CSS-sisäkomponenttien kirjoittamisen

Kuten painikekomponenttiesimerkistä näkyy, styled-komponentit mahdollistavat CSS: n ja JS: n yhdistämisen samaan tiedostoon. Sinun ei siis tarvitse luoda erillistä CSS-tiedostoa tai vaihtaa tiedostosta toiseen.

Tämä on valtava etu luotaessa käyttöliittymäsarjoja, koska tallennat kaikki komponenttien toiminnot yhteen tiedostoon.

Muuten CSS: n kirjoittaminen komponenttien sisällä. Se helpottaa rekvisiitta ja tilojen jakamista tyylien kanssa.

Mahdollistaa tyyppitarkistuksen

Tyylistetyillä komponenteilla voit tyyppitarkistaa tyyleissäsi käytetyt rekvisiitta ja arvot. Voit esimerkiksi kirjoittaa yllä olevan painikekomponentin uudelleen TypeScriptillä.

käyttöliittymärekvisiitta{
 ensisijainen: boolean
}
const Button = styled.button<rekvisiitta>`
pehmuste: 0.8rem 1.6rem;
 taustaväri: ${(rekvisiitta) => (props.primary? "violetti": "valkoinen")};
 raja: 1px kiinteä #00000;
 väri: ${(rekvisiitta) => (props.primary? "valkoinen": "violetti")};
`;

TypeScriptin käyttäminen komponentissa tarkoittaa tyyppivirheiden tarkistamista koodattaessa ja virheenkorjausajan lyhentämistä.

Tukee Theming Out of Box

Tumman teeman lisääminen tai mikä tahansa muu hakemukseesi liittyvä teema voi olla vaikea ja aikaa vievä. Styled-komponentit kuitenkin yksinkertaistavat prosessia. Voit lisätä teemoja sovellukseesi viemällä a käärekomponentti.

konst Button = styled.main`
 taustaväri: ${props => props.theme.light.background};
 väri: ${rekvisiitta => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Painike>
 Valopainike
</Button>
</ThemeProvider>

ThemeProvider-komponentti välittää teemat kaikille tyyliteltyille komponenteille, jotka se käärii. Nämä komponentit voivat sitten käyttää teeman arvoja tyyleissään. Tässä esimerkissä painike käyttää teeman arvoja taustan ja fontin väreille.

Tyyliteltyjen komponenttien käytön haitat

Vaikka tyylikomponenttien kirjastolla on monia etuja, sillä on myös haittoja.

Se ei ole kehyksestä riippumaton

CSS: n kirjoittaminen JS: llä tarkoittaa, että näiden kahden erottaminen tulevaisuudessa on vaikeaa, mikä on kauheaa ylläpidettävyyden kannalta. Jos esimerkiksi päätät vaihtaa JavaScript-kehys, sinun on kirjoitettava suurin osa koodikannastasi uudelleen.

Tämä on aikaa vievää ja kallista. Käyttämällä CSS-moduulit tai viitekehyksestä riippumaton kirjasto, kuten tunne, on tulevaisuudenkestävämpi.

Sitä voi olla vaikea lukea

Tyylisten ja React-komponenttien erottaminen toisistaan ​​voi olla vaikeaa, varsinkin atomisuunnittelujärjestelmän ulkopuolella. Harkitse tätä esimerkkiä:

<Main>
<Nav>
<ListItem>
<Linkkiteksti>Ota lemmikki</LinkText>
</ListItem>
<ListItem>
<Linkkiteksti>Lahjoittaa</LinkText>
</ListItem>
</Nav>
<Otsikko>Adoptoi, älä't kauppaan!</Header>
<SecondaryBtn btnText="Lahjoittaa" />
</Main>

Ainoa tapa tietää, mikä komponentti sisältää liiketoimintalogiikkaa, on tarkistaa, onko sillä rekvisiitta. Lisäksi, vaikka tämän esimerkin komponenttien nimet ovat kuvaavia, niitä on silti vaikea visualisoida.

Esimerkiksi Otsikko-komponentti voi olla otsikko, mutta ellet tarkista tyylejä, et ehkä koskaan tiedä, onko se h1, h2 vai h3.

Jotkut kehittäjät ratkaisevat tämän ongelman käyttämällä vain tyyliteltyä komponenttia kääreenä ja käyttämällä semanttisia HTML-tageja sen sisällä oleville elementeille.

Tässä esimerkissä otsikkokomponentti voisi käyttää h1-tunnistetta.

<h1>Adoptoi, älä't kauppaan!</h1>

Voit viedä tätä pidemmälle määrittelemällä tyylilliset komponentit toisessa tiedostossa (esim. styled.js), jonka voit myöhemmin tuoda React-komponenttiin.

tuonti * kuten Tyylitelty alkaen './styled'
// käytä styled.components
<tyylistä. Main>
// koodi
</styled.Main>

Näin saat selkeän kuvan siitä, mitkä komponentit ovat tyyliteltyjä ja mitkä ovat React-komponentteja.

Tyylilliset komponentit kootaan ajon aikana

Tyyliteltyjä komponentteja käyttävien sovellusten osalta selain lataa CSS: n ja jäsentää sen JavaScriptin avulla ennen niiden lisäämistä sivulle. Tämä aiheuttaa suorituskykyongelmia, koska käyttäjän on ladattava paljon JavaScriptiä ensimmäisessä latauksessa.

Staattinen CSS on paljon nopeampi. Sitä ei tarvitse käsitellä ennen kuin selain käyttää sitä sivujen tyyliin. Tyylistettujen komponenttien kirjasto kuitenkin paranee jokaisen julkaisun myötä. Jos sinulla on varaa pienempään suorituskykyyn, käytä sitä.

Milloin tyyliteltyjä komponentteja tulee käyttää

Jotkut kehittäjät nauttivat CSS: n kirjoittamisesta JS-tiedostoina, kun taas toiset haluavat erilliset CSS-tiedostot. Kuinka valitset CSS: n kirjoittamisen, pitäisi lopulta riippua itse projektista ja siitä, mistä sinä tai tiimisi pidät. Tyylilliset komponentit ovat hyvä valinta käyttöliittymäkirjaston rakentamiseen, koska kaikki voi olla yhdessä tiedostossa ja helposti viedä ja käyttää uudelleen.

Jos haluat kirjoittaa puhdasta CSS: ää, käytä CSS-moduuleja. Sinulla voi olla erilliset CSS-tiedostot, ja se kattaa oletusarvoisesti tyylejä paikallisesti. Riippumatta siitä, minkä valinnan teet, vankka CSS-tietämys on välttämätöntä.