"React" komponentų stilizavimas naudojant "Emotion

Ar norite moderniai ir galingai tvarkyti " React" komponentų stilių? Naudodami " Emotion" biblioteką galite integruoti CSS tiesiogiai į "React" komponentus ir efektyviai kurti naudotojo sąsają. Šiame vadove paaiškinsiu stiliaus kūrimo su "Emotion" pagrindus, paaiškinsiu, kaip įdiegti ir naudoti biblioteką, ir pateiksiu keletą naudingų patarimų.

Pagrindinės išvados

• Emotion suteikia galimybę rašyti CSS "JavaScript" ir siūlo intuityvų tvarkymą.
• Naudodami "Emotion" galite naudoti įvairius stilizavimo būdus, įskaitant šablonų literalus ir css rekvizito naudojimą.
• Naudojant "Emotion" stilių valdymas tampa labiau modulinis, o tai pagerina pakartotinį naudojimą ir skaitomumą.

Žingsnis po žingsnio vadovas

1. Įdiekite "Emotion

Pirmiausia į savo projektą turite įdiegti "Emotion". Atidarykite terminalą ir pereikite į savo projekto katalogą. Įvykdykite šią komandą, kad įdiegtumėte emotion biblioteką:

Npm install @emotion/react @emotion/styled

2. Importuokite CSS

Galite naudoti emotion savo App.jsx faile. Turėtumėte importuoti emotion, kad galėtumėte naudoti css funkciją ir importuoti stilizuotą elementą. Į savo failo viršų pridėkite toliau pateiktą tekstą:

/** importuokite { css } iš "@emotion/react"; importuokite styled iš "@emotion/styled";

3. stilizavimas naudojant šablono literatūras

CSS kintamajam sukurti naudokite "Emotion" funkciją css. Nustatykite CSS konvencijas naudodami šablono literatūrinius žodžius. Čia pateikiamas pavyzdys, kaip galite parašyti savo programėlės apvalkalo klasę:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px; `;

Šis kodas blokuoja flexbox naudojimą, kad būtų užtikrintas išdėstymo išdėstymas.

4. stiliaus taikymas

Norėdami taikyti apibrėžtą stilių, pagrindinio HTML elemento className lauke perduokite kintamąjį appStyle. Štai kaip tai turėtų atrodyti:

Funkcija App() { return <div css={appStyle}>Hello world!</div>; }

5. stilizuotų komponentų naudojimas

Be css kintamojo naudojimo, taip pat galite naudoti stilizuotus komponentus su emocija. Norėdami sukurti stilizuotą komponentą, galite naudoti tokį kodą:

Container = styled.div` padding: 20px; background-color: lightblue; `;

Taip Container taps nauju CSS pagrindu sukurtu komponentu, turinčiu visus apibrėžtus stilius.

6. medijos užklausų įterpimas

Emotion leidžia lengvai integruoti medijos užklausas į CSS. Tiesiog pridėkite jas prie šablono pažodinio teksto:

@media (max-width: 600px) { font-size: 14px; } ``;

Ši medijos užklausa pakeičia teksto šrifto dydį, jei rodomas plotis yra mažesnis nei 600 pikselių.

7. naudokite "hover" efektus

CSS šablonuose taip pat galite lengvai apibrėžti "hover" efektus:

> css` background-color: blue; colour: white; &:hover { background-color: darkblue; } ``;

Ši CSS taisyklė pakeičia elemento fono spalvą, kai jis užvedamas pele.

8. Sudėtingesnių stilių derinimas

Emocija leidžia sujungti kelių klasių pavadinimus. Tai padaryti galima naudojant funkciją cx:

importuokite { css, cx } iš '@emotion/react';

const primaryStyle = css colour: blue;;

const secondaryStyle = css colour: red;;

Šiuo atveju tekstas rodomas ir mėlyna, ir raudona spalva.

9. būsimi plėtiniai

Jei ateityje valdysite didelį projektą, gali būti naudinga stilius organizuoti skirtinguose moduliuose. Pavyzdžiui, galite sukurti commonStyles.js ir ten eksportuoti pagrindinius stilius:

Išskirkite šiuos stilius: // commonStyles.js export const flexCenter = css` display: flex; justify-content: centre; align-items: centre; `;

Dabar galite įterpti flexCenter į bet kurį kitą komponentą.

10. testai ir pritaikymas

Įkelkite savo programą į naršyklę ir patikrinkite, ar stiliai rodomi teisingai. Eksperimentuokite su skirtingais stiliais ir pamatykite rezultatą realiuoju laiku.

Apibendrinimas

Naudojant "Emotion" ir "React" derinį dabar galima kurti tikroviškus vartotojo sąsajos maketus. Emotion leidžia apibrėžti ir efektyviai valdyti CSS tiesiogiai "JavaScript". Galite pasinaudoti ekrano tankio ir glaudžios logikos bei stiliaus integracijos privalumais.