Az Emotion könyvtár leegyszerűsíti a CSS használatát a Reactben, és néhány praktikus szintaktikai funkciót is hozzáad.

A React-alkalmazások formázása kihívást jelenthet, különösen akkor, ha stílusait rendezetten és karbantarthatóan szeretné tartani. A folyamat egyszerűsítése érdekében az Emotion könyvtár magasabb szintű absztrakciót biztosít a CSS-n felül.

Mi az Érzelem?

Az Emotion egy könyvtár a React-alkalmazások stílustervezéséhez, amely egyszerű és hatékony módot kínál a stílusok kezelésére. Lehetővé teszi, hogy CSS-t írjon JavaScriptben, és rugalmas API-t biztosít az összetevők stílusához.

Az Emotion használatának egyik fő előnye a React alkalmazás stílusának meghatározásában, hogy hatékonyabb módot biztosít a stílusok kezelésére. Például használhat azonos osztályneveket több összetevőben anélkül, hogy fennállna az elnevezési ütközések veszélye. ha CSS/SASS-szal dolgozik.

Az Érzelem könyvtár csak az azokat használó összetevőkre alkalmazza a stílusokat, nem pedig a teljes oldalra. Ez segíthet elkerülni az ütközéseket az oldalon lévő más stílusokkal, és modulárisabbá és újrafelhasználhatóbbá teheti a kódot.

Hogyan telepítsük az érzelmet

Az Emotion könyvtár hozzáadásához a React alkalmazáshoz futtassa a következő terminálparancsot:

npm install --save @emotion/react

Az Emotion könyvtárnak most telepítve kell lennie a projektben, és készen kell állnia a React alkalmazás stílusához.

Styling Az Emotion css Prop használatával

Miután telepítette az Emotion könyvtárat, használhatja a css kellék a React alkalmazás stílusához. A css A prop hasonló a stílusprofilhoz, mivel stílusokat adhat át neki karakterláncok vagy normál JavaScript objektumok formájában.

Az alkalmazás stílusához a css prop, importálnia kell a @érzelem/reagálás könyvtárat, majd határozza meg a stílusait:

/** @jsxImportSource @érzelem/reagál */
import Reagál tól től'reagál';
import {css} tól től'@érzelem/reagálás';
funkcióApp() {
Visszatérés (
 párnázás: 0.5rem 1rem;
 határ: nincs;
 font-family: cursive;
 határsugár: 12px;
 szín: #333333;
 háttérszín: örököl;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Kattints ide
 </button>
 )
}


exportalapértelmezett App;

A kód első sora, /** @jsxImportSource @emotion/react */, ez egy olyan megjegyzés, amelyet hozzá kell adni a JSX fájlhoz, jelezve, hogy az Emotion könyvtárat a fájl JSX gyakorlataként kell használni.

A JSX-ben a pragma egy olyan függvény, amely a JSX szintaxisát normál JavaScriptté alakítja. Alapértelmezés szerint a React a React.createElement JSX pragmaként működik. Azonban a @jsxImportSource megjegyzést, megadhat egy másik gyakorlatot is.

Ebben az esetben a @érzelem/reagálás pragma azt mondja a JSX-nek, hogy használja a jsx függvényt az Emotion könyvtárból a JSX kód átalakításához. Ha hozzáadja a pragma megjegyzést egy JSX-fájlhoz, használhatja az Emotion könyvtár CSS-in-JS funkcióit az összetevőiben.

A gomb komponens egy gombot jelenít meg néhány egyedi stílussal. Itt, a css prop hozzáadja az egyéni stílust a gombelemhez.

A css A prop támogatja a beágyazott stílust is. A beágyazott stílus lehetővé teszi egymásba ágyazott stílusok írását.

Például:

/** @jsxImportSource @érzelem/reagál */
import Reagál tól től'reagál';
import {css} tól től'@érzelem/reagálás';
funkcióApp() {
Visszatérés (
 párnázás: 0.5rem 1rem;
 határ: nincs;
 font-family: cursive;
 határsugár: 12px;
 szín: #333333;
 háttérszín: örököl;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:lebeg{
 szín: #e2e2e2;
 háttérszín: #333333;
 }
`}>
 Kattints ide
 </button>
 )
}
exportalapértelmezett App;

Ebben a példában a hover stílus deklarációja a beágyazott stílusjegyet használja css támaszt. A fenti kódblokkban a háttér és a betűtípus színe megváltozik, amikor az egérmutatót a gomb fölé viszi.

Objektumstílusok átadása a css Prop

A css A prop a szokásos JavaScript objektumstílusokat is elfogadja. Több komponens stílusozásakor az objektumstílusok használata lehetővé teszi a stílusok újrafelhasználását az összetevőkben.

Objektumstílusok átadásához a css prop, határozza meg a stílusokat JavaScript objektumként, és adja át a propnak:

const stílus = {
 párnázás: "0,5 rem 1 rem",
 határ: 'egyik sem',
 betűtípus család: 'kurzív',
 határsugár: "12px",
 szín: '#333333',
 háttérszín: 'örököl',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:lebeg': {
 szín: "#e2e2e2",
 háttérszín: '#333333',
 }
}
Visszatérés (
"alkalmazás">

Vegye figyelembe, hogy a CSS-tulajdonságok neve kötőjel helyett camelCased. Ennek az az oka, hogy a stílusok JavaScript objektumokként vannak definiálva, amelyek camelCase elnevezési konvenciót használnak.

Styling a stílusos összetevők használatával

Az Emotion könyvtár stílusos összetevőket is használ a React alkalmazások stílusozásakor. Stílusos komponensek használata hasonló a React komponensekhez, eltekintve attól a ténytől, hogy már kész stílusokat tartalmaznak. Stílusos összetevők létrehozásához használja a stílusú funkció.

A stílusú funkció lehetővé teszi újrafelhasználható stílusú alkatrészek létrehozását. Használatához a stílusú függvényt, importálja a érzelem/stílus könyvtár.

Ahhoz, hogy a @érzelem/stílusú könyvtárat az alkalmazásban, telepíteni fogja azt a projektbe. Ezt a következő parancs futtatásával teheti meg a projekt termináljában:

npm install @emotion/styled

A telepítés után a @érzelem/stílusú könyvtár, importálja a stílusú funkciót, és határozza meg stílusait:

import stílusú tól től"@érzelem/stílusú";
const Button = styled.button({
 párnázás: "0,5 rem 1 rem",
 határ: 'egyik sem',
 betűtípus család: 'kurzív',
 határsugár: "12px",
 szín: '#333333',
 háttérszín: 'örököl',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&:lebeg': {
 szín: "#e2e2e2",
 háttérszín: '#333333',
 }
})
exportalapértelmezett Gomb;

A fenti kódblokkban egy stílusos összetevő Gomb létrehozva. Ezt a gombot használhatja a React alkalmazásban, mint bármely más React összetevőt.

Például így:

import Reagál tól től'reagál';
import Gomb tól től'./Gomb';
funkcióApp() {
Visszatérés (








exportalapértelmezett App;

Rendering a App komponens megjelenít egy gombot a következőben meghatározott stílusokkal Gomb komponens a képernyőn.

A stílusú függvény karakterláncstílusokat is elfogad. Az objektumstílusok megközelítésétől eltérően néz ki, de hasonlóan működik.

import stílusú tól től"@érzelem/stílusú";
const Gomb = stílusos.gomb`
 párnázás: 0.5rem 1rem;
 határ: nincs;
 font-family: cursive;
 határsugár: 12px;
 szín: #333333;
 háttérszín: örököl;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover {
 szín: #e2e2e2;
 háttérszín: #333333;
 }
`
exportalapértelmezett Gomb;

Hatékony stíluskészítés érzelmekkel

Az Emotion egy hatékony könyvtár a React-összetevők stílusának meghatározásához, amely egyszerű és hatékony módot kínál a stílusok kezelésére. Akár kezdő, akár tapasztalt fejlesztő, az Emotion segíthet leegyszerűsíteni a React alkalmazás stílusának kialakítását, valamint megkönnyíti a kód karbantartását és méretezését.

Tehát ha hatékonyabb és rugalmasabb módot keres a React összetevőinek stílusára, fontolja meg az Emotiont.