Stylování komponent React pomocí Emotion

Chcete řešit stylování React-komponent ve moderním a výkonném stylu? S knihovnou Emotion můžete přímo integrovat CSS do svých React komponent a efektivně tak navrhovat uživatelské rozhraní. V této nápovědě vám vysvětlím základy stylování s Emotion, jak nainstalovat a používat knihovnu a dám vám několik užitečných tipů.

Nejdůležitější poznatky

• Emotion umožňuje psát CSS v JavaScriptu a poskytuje intuitivní ovládání.
• S Emotion můžete využívat různé stylovací techniky, včetně Template Literals a vlastnosti css-Props.
• Správa stylů je díky používání Emotion modulární, což zlepšuje opakovatelnost a čitelnost kódu.

Krok za krokem návod

1. Nainstalujte Emotion

Nejprve musíte do svého projektu nainstalovat Emotion. Otevřete terminál a přejděte do adresáře vašeho projektu. Zde spusťte následující příkaz k instalaci knihovny emotion:

npm install @emotion/react @emotion/styled

2. Importujte CSS

V souboru App.jsx můžete použít Emotion. Pro použití css funkce a importování styled elementu musíte Emotion importovat. Přidejte následující kód na začátek vašeho souboru:

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

3. Stylování pomocí Template Literals

Použijte funkci css z Emotion pro vytvoření CSS proměnné. Definujte konvence CSS pomocí Template Literals. Zde je příklad, jak můžete psát wrapper třídu pro svou aplikaci:

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

Tento kód blokuje použití flexboxu k zajištění rozložení layoutu.

4. Použití stylu

Pro použití definovaného stylu předejte proměnnou appStyle do className atributu vašeho hlavního HTML elementu. Zde je, jak by to mělo vypadat:

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

5. Použití Styled komponent

Kromě použití css proměnné můžete také používat Styled komponenty s Emotion. Pro vytvoření Styled komponenty můžete použít následující kód:

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

Tímto vytvoříte novou komponentu založenou na CSS se všemi definovanými styly.

6. Vkládání Mediálních dotazů

Emotion usnadňuje integraci mediálních dotazů do vašeho CSS. Stačí je přidat do Template Literals:

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

Tento mediální dotaz změní velikost písma textu, pokud je šířka zobrazení menší než 600 pixelů.

7. Použití efektu Hover

Také můžete definovat efekty hover ve svých CSS šablonách jednoduše:

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

Tato CSS pravidlo změní barvu pozadí prvku při přejetí myší.

8. Kombinace složitějších stylů

Emotion umožňuje kombinovat více tříd. Toho lze dosáhnout pomocí funkce cx:

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

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

V tomto případě je text zobrazen jak modře, tak červeně.

9. Budoucí rozšíření

Pokud v budoucnu spravujete velký projekt, může být užitečné organizovat své styly do různých modulů. Například můžete vytvořit commonStyles.js a exportovat své základní styly:

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

Nyní můžete vložit flexCenter do jakékoliv jiné komponenty.

10. Testy a úpravy

Načtěte svou aplikaci v prohlížeči a zkontrolujte, zda jsou styly správně zobrazeny. Experimentujte s různými styly a dívejte se na výsledek v reálném čase.

Shrnutí

S kombinací Emotion a React je možné vytvářet realistická uživatelská rozložení. Emotion umožňuje definovat CSS přímo v JavaScriptu a efektivně spravovat. Můžete tak využívat výhod v hustotě obrazovky a úzké integrace mezi logikou a stylováním.