Emotion-kirjasto yksinkertaistaa CSS: n käyttöä Reactissa ja lisää myös käteviä syntaksiominaisuuksia.

React-sovelluksen muotoilu voi olla haastavaa, varsinkin jos haluat pitää tyylisi järjestyksessä ja ylläpidettävänä. Tämän prosessin yksinkertaistamiseksi Emotion-kirjasto tarjoaa korkeamman tason abstraktion CSS: n päälle.

Mikä on tunne?

Emotion on React-sovellusten muotoilukirjasto, joka tarjoaa yksinkertaisen ja tehokkaan tavan hallita tyylejäsi. Sen avulla voit kirjoittaa CSS: ää JavaScriptillä ja tarjoaa joustavan API: n komponenttien muotoiluun.

Yksi tärkeimmistä eduista Emotion-sovelluksen käyttämisessä React-sovelluksen muotoiluun on, että se tarjoaa tehokkaamman tavan hallita tyylejäsi. Voit esimerkiksi käyttää identtisiä luokkien nimiä useissa komponenteissa ilman syntyvien nimeämistörmäysten riskiä. kun työskentelet CSS/SASS: n kanssa.

Tunnekirjasto soveltaa tyylejäsi vain niitä käyttäviin komponentteihin koko sivun sijaan. Tämä voi auttaa sinua välttämään ristiriidat sivun muiden tyylien kanssa ja tehdä koodistasi modulaarisemman ja uudelleenkäytettävän.

instagram viewer

Kuinka asentaa tunne

Lisää Emotion-kirjasto React-sovellukseesi suorittamalla seuraava päätekomento:

npm install --save @emotion/react

Emotion-kirjaston pitäisi nyt olla asennettuna projektiisi ja valmis käytettäväksi React-sovelluksesi muotoiluun.

Muotoilu käyttämällä Emotionin css-propaa

Kun olet asentanut Emotion-kirjaston, voit käyttää sitä css React-sovelluksesi tyyliin. The css prop on samanlainen kuin tyyliprop, sillä voit välittää sille tyylejä merkkijonojen tai tavallisten JavaScript-objektien muodossa.

Voit muotoilla sovelluksesi käyttämällä css prop, sinun on tuotava se osoitteesta @tunne/reaktio kirjasto, määritä sitten tyylisi:

/** @jsxImportSource @tunne/reagoi */
tuonti Reagoi alkaen'reagoi';
tuonti {css} alkaen'@emotion/react';
toimintoSovellus() {
palata (
 pehmuste: 0.5rem 1rem;
 reuna: ei mitään;
 font-family: kursiivinen;
 rajan säde: 12px;
 väri: #333333;
 taustaväri: perii;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Napsauta Minä
 </button>
 )
}


viedäoletuksena Sovellus;

Ensimmäinen koodirivi, /** @jsxImportSource @emotion/react */, on erityinen kommentti, joka sinun tulee lisätä JSX-tiedostoon osoittamaan, että Emotion-kirjastoa tulisi käyttää JSX-käytäntönä kyseiselle tiedostolle.

JSX: ssä pragma on funktio, joka muuntaa JSX-syntaksin tavalliseksi JavaScriptiksi. Oletuksena React käyttää React.createElement toimivat JSX-pragmana. Kuitenkin kanssa @jsxImportSource kommentti, voit määrittää toisen käytännön.

Tässä tapauksessa @tunne/reaktio pragma käskee JSX: ää käyttämään jsx toiminto Emotion-kirjastosta muuntaaksesi JSX-koodin. Lisäämällä pragma-kommentin JSX-tiedostoon, voit käyttää Emotion-kirjaston CSS-in-JS-ominaisuuksia komponenteissasi.

Painikekomponentti tekee painikkeesta mukautetun tyylin. Tässä, css prop lisää mukautetun tyylin painikeelementtiin.

The css prop tukee myös sisäkkäistä tyyliä. Sisäkkäisten tyylien avulla voit kirjoittaa tyylejä, jotka ovat sisäkkäisiä toistensa sisällä.

Esimerkiksi:

/** @jsxImportSource @tunne/reagoi */
tuonti Reagoi alkaen'reagoi';
tuonti {css} alkaen'@emotion/react';
toimintoSovellus() {
palata (
 pehmuste: 0.5rem 1rem;
 reuna: ei mitään;
 font-family: kursiivinen;
 rajan säde: 12px;
 väri: #333333;
 taustaväri: perii;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover{
 väri: #e2e2e2;
 taustaväri: #333333;
 }
`}>
 Napsauta Minä
 </button>
 )
}
viedäoletuksena Sovellus;

Tässä esimerkissä hover-tyylin määritys käyttää sisäkkäistä tyyliominaisuutta css prop. Yllä olevan koodilohkon tausta ja fontin väri muuttuvat aina, kun viet hiiren painikkeen päälle.

Objektityylien välittäminen css Prop: lle

The css prop hyväksyy myös tavalliset JavaScript-objektityylit. Kun muotoilet useita komponentteja, voit käyttää objektityylejä uudelleen komponenteissasi.

Objektityylien välittäminen css prop, määrittele tyylit JavaScript-objektiksi ja välitä se prop: lle:

konst tyyli = {
 pehmuste: "0.5rem 1rem",
 raja: 'ei mitään',
 fontFamily: "kursiivinen",
 rajasäde: "12px",
 väri: '#333333',
 taustaväri: 'periä',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hover': {
 väri: '#e2e2e2',
 taustaväri: '#333333',
 }
}
palata (
"sovellus">

Huomaa, että CSS-ominaisuuksien nimet ovat camelCased tavutusten sijaan. Tämä johtuu siitä, että tyylit on määritelty JavaScript-objekteiksi, jotka käyttävät camelCase-nimeämiskäytäntöjä.

Muotoilu tyyliteltyjen komponenttien avulla

Emotion-kirjasto käyttää myös tyyliteltyjä komponentteja React-sovellusten muotoilussa. Käytä tyyliteltyjä komponentteja on samanlainen kuin React-komponentit, paitsi että ne sisältävät tyylejä heti valmiiksi. Luodaksesi tyylikkäitä komponentteja, käytät tyylistä toiminto.

The tyylistä -toiminnon avulla voit luoda uudelleenkäytettäviä tyylillisiä komponentteja. Käyttääksesi tyylistä funktio, tuo se osoitteesta tunne/tyyli kirjasto.

Saadaksesi @tunne/tyyli kirjasto sovelluksessasi, asennat sen projektiisi. Voit tehdä tämän suorittamalla seuraavan komennon projektisi terminaalissa:

npm asennus @emotion/styled

Asennuksen jälkeen @tunne/tyyli kirjasto, tuo tyylistä toiminto ja määrittele tyylisi:

tuonti tyylistä alkaen"@emotion/styled";
konst Button = styled.button({
 pehmuste: "0.5rem 1rem",
 raja: 'ei mitään',
 fontFamily: "kursiivinen",
 rajasäde: "12px",
 väri: '#333333',
 taustaväri: 'periä',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&:hover': {
 väri: '#e2e2e2',
 taustaväri: '#333333',
 }
})
viedäoletuksena Painike;

Yllä olevassa koodilohkossa tyylitelty komponentti Painike on luotu. Voit käyttää tätä painiketta React-sovelluksessasi kuten mitä tahansa muuta React-komponenttia.

Niin kuin:

tuonti Reagoi alkaen'reagoi';
tuonti Painike alkaen'./Button';
toimintoSovellus() {
palata (








viedäoletuksena Sovellus;

Renderöimällä Sovellus komponentti näyttää painikkeen, jossa on määritetyt tyylit Painike komponenttia näytölläsi.

The tyylistä funktio hyväksyy myös merkkijonotyylit. Se näyttää erilaiselta kuin objektityylien lähestymistapa, mutta toimii samalla tavalla.

tuonti tyylistä alkaen"@emotion/styled";
konst Button = styled.button`
 pehmuste: 0.5rem 1rem;
 reuna: ei mitään;
 font-family: kursiivinen;
 rajan säde: 12px;
 väri: #333333;
 taustaväri: perii;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover {
 väri: #e2e2e2;
 taustaväri: #333333;
 }
`
viedäoletuksena Painike;

Tehokas muotoilu tunteella

Emotion on tehokas kirjasto React-komponenttien muotoiluun, joka tarjoaa yksinkertaisen ja tehokkaan tavan hallita tyylejäsi. Olitpa aloittelija tai kokenut kehittäjä, Emotion voi auttaa yksinkertaistamaan React-sovelluksesi muotoiluprosessia ja helpottamaan koodin ylläpitoa ja skaalausta.

Joten jos etsit tehokkaampaa ja joustavampaa tapaa muotoilla React-komponenttejasi, harkitse Emotionia.