React.js programos stiliaus kūrimas naudojant emocijas

Sukurti „React“ programos stilių gali būti sudėtinga, ypač jei norite, kad stiliai būtų tvarkingi ir prižiūrimi. Siekiant supaprastinti šį procesą, emocijų bibliotekoje CSS viršuje yra aukštesnio lygio abstrakcija.

Kas yra Emocija?

„Emotion“ yra „React“ programų stiliaus kūrimo biblioteka, kuri suteikia paprastą ir efektyvų būdą valdyti stilius. Tai leidžia rašyti CSS naudojant „JavaScript“ ir suteikia lanksčią API, skirtą komponentų stiliui formuoti.

Vienas iš pagrindinių „Emotion“ naudojimo privalumų kuriant „React“ programos stilių yra tai, kad tai yra efektyvesnis būdas valdyti stilius. Pavyzdžiui, keliuose komponentuose galite naudoti identiškus klasių pavadinimus, nerizikuodami pavadinimų susidūrimais. dirbant su CSS/SASS.

Emocijų biblioteka taiko jūsų stilius tik juos naudojantiems komponentams, o ne visam puslapiui. Tai gali padėti išvengti prieštaravimų su kitais puslapio stiliais ir padaryti kodą labiau modulinį bei daugkartinį.

Kaip įdiegti emociją

Norėdami pridėti emocijų biblioteką prie programos „React“, paleiskite šią terminalo komandą:

npm įdiegti --save @emotion/react

„Emotion“ biblioteka dabar turėtų būti įdiegta jūsų projekte ir paruošta naudoti „React“ programos stiliui kurti.

Stiliaus kūrimas naudojant Emotion's css Prop

Įdiegę emocijų biblioteką galėsite naudoti css „React“ programos stilių. The css prop yra panašus į stiliaus rekvizitus, nes jai galite perduoti stilius eilučių arba įprastų JavaScript objektų pavidalu.

Norėdami sukurti savo programos stilių, naudodami css prop, turite jį importuoti iš @emocija/reaguoti biblioteką, tada nustatykite savo stilius:

/** @jsxImportSource @emocija/reaguoti */
importuoti Reaguoti iš'reaguoti';
importuoti {css} iš„@emocija/reaguoti“;
funkcijaProgramėlė() {
grąžinti (
 pamušalas: 0.5rem 1rem;
 kraštinė: nėra;
 šriftų šeima: kursyvus;
 sienos spindulys: 12px;
 spalva: #333333;
 fono spalva: paveldėti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Paspausk mane
 </button>
 )
}
eksportuotinumatytas Programėlė;

Pirmoji kodo eilutė, /** @jsxImportSource @emotion/react */, yra konkretus komentaras, kurį turėtumėte pridėti prie JSX failo, nurodydami, kad emocijų biblioteka turėtų būti naudojama kaip to failo JSX pragma.

JSX pragma yra funkcija, paverčianti JSX sintaksę į įprastą „JavaScript“. Pagal numatytuosius nustatymus „React“ naudoja React.createElement veikia kaip JSX pragma. Tačiau su @jsxImportSource komentarą, galite nurodyti kitokią pragmą.

Šiuo atveju, @emocija/reaguoti pragma nurodo JSX naudoti jsx funkcija iš emocijų bibliotekos, kad pakeistų JSX kodą. Pridėję pragma komentarą prie JSX failo, savo komponentuose galite naudoti emocijų bibliotekos CSS-in-JS funkcijas.

Mygtuko komponentas pateikia mygtuką su tam tikru pasirinktu stiliumi. Čia, css prop prideda pasirinktinį mygtuko elemento stilių.

The css prop taip pat palaiko įdėtą stilių. Įdėtas stilius leidžia rašyti stilius, įdėtus vienas į kitą.

Pavyzdžiui:

/** @jsxImportSource @emocija/reaguoti */
importuoti Reaguoti iš'reaguoti';
importuoti {css} iš„@emocija/reaguoti“;
funkcijaProgramėlė() {
grąžinti (
 pamušalas: 0.5rem 1rem;
 kraštinė: nėra;
 šriftų šeima: kursyvus;
 sienos spindulys: 12px;
 spalva: #333333;
 fono spalva: paveldėti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover{
 spalva: #e2e2e2;
 fono spalva: #333333;
 }
`}>
 Paspausk mane
 </button>
 )
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje žymeklio užvedimo stiliaus deklaravimui naudojama įdėtojo stiliaus funkcija css prop. Fonas ir šrifto spalva aukščiau esančiame kodo bloke pasikeis, kai užvesite pelės žymeklį virš mygtuko.

Objektų stilių perdavimas css Prop

The css prop taip pat priima įprastus JavaScript objektų stilius. Kuriant kelių komponentų stilių, objektų stilių naudojimas leidžia pakartotinai naudoti stilius savo komponentuose.

Norėdami perduoti objektų stilius į css prop, apibrėžkite stilius kaip JavaScript objektą ir perduokite jį prop:

konst stilius = {
 pamušalas: „0.5rem 1rem“,
 kraštinė: 'nė vienas',
 šrifto šeima: "kursyvas",
 kraštinės spindulys: "12px",
 spalva: '#333333',
 fono spalva: 'paveldėti',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hover': {
 spalva: „#e2e2e2“,
 fono spalva: '#333333',
 }
}
grąžinti (
"programėlė">
Spustelėkite Aš</button>
 </div>
);

Atminkite, kad CSS ypatybių pavadinimai yra CamelCased, o ne brūkšneliai. Taip yra todėl, kad stiliai apibrėžiami kaip „JavaScript“ objektai, kuriuose naudojamos „camelCase“ pavadinimų sutartys.

Stilius naudojant stilizuotus komponentus

Emocijų biblioteka taip pat naudoja stilizuotus komponentus formuojant „React“ programas. Stilių komponentų naudojimas yra panašus į „React“ komponentus, neskaitant to, kad juose yra išimtų stilių. Norėdami sukurti stiliaus komponentus, naudosite stiliaus funkcija.

The stiliaus funkcija leidžia kurti daugkartinio naudojimo stiliaus komponentus. Norėdami naudoti stiliaus funkciją, importuokite ją iš emocija / stilius biblioteka.

Norėdami gauti @emocija/stilius biblioteką savo programoje, įdiegsite ją į savo projektą. Tai galite padaryti paleisdami šią komandą savo projekto terminale:

npm įdiegti @emotion/styled

Įdiegę @emocija/stilius biblioteka, importuoti stiliaus funkciją ir apibrėžkite savo stilius:

importuoti stiliaus iš„@emocija/stilius“;
konst Button = styled.button({
 pamušalas: „0.5rem 1rem“,
 kraštinė: 'nė vienas',
 šrifto šeima: "kursyvas",
 kraštinės spindulys: "12px",
 spalva: '#333333',
 fono spalva: 'paveldėti',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hover': {
 spalva: „#e2e2e2“,
 fono spalva: '#333333',
 }
})
eksportuotinumatytas Mygtukas;

Aukščiau esančiame kodo bloke yra stiliaus komponentas Mygtukas yra sukurtas. Šį mygtuką galite naudoti savo programoje „React“, kaip ir bet kurį kitą „React“ komponentą.

Kaip taip:

importuoti Reaguoti iš'reaguoti';
importuoti Mygtukas iš'./mygtukas';
funkcijaProgramėlė() {
grąžinti (



Spustelėkite Aš</Button>
 </div>
 );
}

eksportuotinumatytas Programėlė;

Atvaizdavimas Programėlė komponentas parodys mygtuką su stiliais, apibrėžtais Mygtukas ekrane.

The stiliaus funkcija taip pat priima stygų stilius. Jis atrodo kitaip nei objektų stilius, bet veikia panašiai.

importuoti stiliaus iš„@emocija/stilius“;
konst Mygtukas = stilizuotas.mygtukas`
 pamušalas: 0.5rem 1rem;
 kraštinė: nėra;
 šriftų šeima: kursyvus;
 sienos spindulys: 12px;
 spalva: #333333;
 fono spalva: paveldėti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover {
 spalva: #e2e2e2;
 fono spalva: #333333;
 }
`
eksportuotinumatytas Mygtukas;

Efektyvus stilius su emocijomis

„Emotion“ yra galinga „React“ komponentų stiliaus kūrimo biblioteka, kuri suteikia paprastą ir efektyvų būdą valdyti savo stilius. Nesvarbu, ar esate pradedantysis, ar patyręs kūrėjas, „Emotion“ gali padėti supaprastinti „React“ programos stiliaus kūrimo procesą ir palengvinti kodo priežiūrą bei mastelį.

Taigi, jei ieškote efektyvesnio ir lankstesnio būdo formuoti savo React komponentus, apsvarstykite galimybę „Emotion“.