React komponensek stílusa Emotion segítségével

Szeretnéd a React-komponensek stílusát modern és hatékony módon kezelni? Az Emotion könyvtárral közvetlenül beillesztheted a CSS-t a React komponenseidbe, így hatékonyan formázhatod felhasználói felületét. Ebben az útmutatóban elmagyarázom neked az Emotionnal való stílusozás alapjait, hogy hogyan telepíted és alkalmazod a könyvtárat, valamint néhány hasznos tippet adok ehhez.

Legfontosabb megállapítások

• Az Emotion lehetővé teszi a CSS JavaScriptben történő írását, és intuitív kezelést biztosít.
• Az Emotion segítségével különböző stílusozási technikákat alkalmazhatsz, beleértve a sablon szóközöket és a css-Props használatát.
• A stíluskezelést az Emotion moduláris használata teszi átláthatóbbá, javítva az újrahasználhatóságot és olvashatóságot.

Lépésről lépésre útmutató

1. Emotion telepítése

Először telepítened kell az Emotiont a projektbe. Nyisd meg a terminált, és navigálj a projekt könyvtárába. Itt futtasd le az alábbi parancsot az emotion könyvtár telepítéséhez:

npm install @emotion/react @emotion/styled

2. CSS importálása

Az App.jsx fájlban használhatod az Emotiont. Importálnod kell az Emotiont, hogy használd a css függvényt és az styled elemet. Add hozzá az alábbi kódot a fájl elejére:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Stílusozás sablon szóközökkel

Használd az Emotion css függvényét egy CSS változó létrehozásához. Határozd meg a CSS konvenciókat a sablon szóközök segítségével. Itt egy példa, hogy hogyan írj egy Wrapper osztályt az alkalmazásodhoz:

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

Ez a kód lehetővé teszi a flexbox használatát elrendezési rend helyett.

4. Stílus alkalmazása

Az elődefiniált stílus alkalmazásához add át az appStyle változót az osztály-propnak az alap HTML elemen belül. Így kellene kinéznie:

function App() { return <div css={appStyle}>Helló Világ!</div>;
}

5. Styled komponensek használata

A css változó mellett Styled komponenseket is használhatsz Emotion-nel. Egy Styled komponens létrehozásához használd a következő kódot:

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

Ezáltal a Container egy új CSS alapú komponens lesz, amelynek meg vannak határozva az összes stílusai.

6. Médialekérdezések hozzáadása

Az Emotion lehetővé teszi a médialekérdezések egyszerű integrálását a CSS kódba. Egyszerűen add hozzá a sablon szóközök közé:

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

Ez a médialekérdezés megváltoztatja a szöveg betűméretét, ha a kijelző szélessége kevesebb, mint 600 pixel.

7. Hover-effektek alkalmazása

A CSS-sablonjaidba könnyen definiálhatsz hover-effekteket:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Ez a CSS szabály megváltoztatja az elem háttérszínét az egeret ráhelyezve.

8. Összetettebb stílusok kombinálása

Az Emotion lehetővé teszi több osztálynév kombinálását. Ez a cx függvénnyel lehetséges:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

Ebben az esetben a szöveg mind kék, mind piros lesz megjelenítve.

9. Jövőbeli bővítések

Ha jövőben egy nagy projektet kezelsz, jó lehet a stílusaidat különböző modulokba szervezni. Például létrehozhatsz egy commonStyles.js-t, és exportálhatod alapvető stílusaidat ott:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Most már beszúrhatod a flexCenter-t bármelyik másik komponensbe.

10. Tesztek és igazítások

Töltse be alkalmazását a böngészőben, és ellenőrizze, hogy a stílusok megfelelően jelennek-e meg. Kísérletezzen különböző stílusokkal, és nézze meg az eredményt valós időben.

Összefoglalás

Az Emotion és a React kombinációjával már lehetővé válik reális UI elrendezések létrehozása. Az Emotion lehetővé teszi a CSS közvetlen meghatározását JavaScriptben és hatékony kezelését. Eközben kihasználhatja a Screen Density előnyeit és szorosabb integrációt biztosíthat a logika és a stílus között.