Štylovanie komponentov React pomocou Emotion

Chcete efektívne spravovať štýlovanie React-komponentov moderným a výkonným spôsobom? S knižnicou Emotion môžete priamo integrovať CSS do vašich React komponentov a efektívne vytvárať užívateľské rozhranie. V tejto príručke vám vysvetlím základy štýlovania s Emotion, ako nainštalovať a používať knižnicu a poskytnem vám niekoľko užitočných tipov.

Hlavné poznatky

• Emotion umožňuje písať CSS v JavaScripte a poskytuje intuitívne ovládanie.
• S Emotion môžete využiť rôzne štýlovacie techniky, vrátane Template Literals a použitie css-Props.
• Správa štýlov sa stáva s Emotion modulárnejšou, čo zlepšuje opakovateľnosť a čitateľnosť.

Krok za krokom sprievodca

1. Nainštalovanie Emotion

Najskôr musíte nainštalovať Emotion do vášho projektu. Otvorte terminál a navigujte do adresára vášho projektu. Tu spustite nasledujúci príkaz na inštaláciu knižnice Emotion:

npm install @emotion/react @emotion/styled

2. Importovanie CSS

V súbore App.jsx môžete použiť Emotion. Máte byť importovať Emotion pre použitie funkcie css a importovať element styled. Pridajte si na začiatok súboru nasledujúce:

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

3. Štýlovanie s Template Literals

Použite funkciu css z Emotion na vytvorenie CSS premennej. Definujte konvencie štýlov pomocou Template Literals. Tu je príklad, ako môžete napísať zväzok pre vášu aplikáciu:

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

Tento kód blokuje využitie flexboxu na zabezpečenie usporiadania rozloženia.

4. Aplikácia štýlu

Pre použitie definovaného štýlu odovzdajte premennú appStyle v className prop vášho hlavného HTML prvku. Takto by to malo vyzerať:

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

5. Použitie Styled-Components

Okrem využitia css premennej môžete použiť aj Styled-Components s Emotion. Na vytvorenie Styled komponentu môžete použiť nasledujúci kód:

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

Týmto vytvoríte nový komponent založený na CSS, ktorý má všetky definované štýly.

6. Vloženie Mediálnej dopytov

Emotion umožňuje jednoducho integrovať mediálne dopyty do vášho CSS. Jednoducho ich pridajte do Template Literal:

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

Tento mediálny dopyt zmení veľkosť písma textu, ak je šírka zobrazovania menšia ako 600 pixelov.

7. Použitie Hover efektov

Taktiež môžete jednoducho definovať Hover efekty vo vašich CSS šablónach:

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

Toto CSS pravidlo zmení farbu pozadia elementu pri prejdení kurzorom myši.

8. Kombinovanie zložitejších štýlov

Emotion umožňuje kombinovať viaceré class názvy. Toho dosiahnete pomocou funkcie cx:

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

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

V tomto prípade je text zobrazený v modrej a červenej farbe.

9. Budúce rozšírenia

Ak v budúcnosti riadite veľký projekt, môže byť užitočné organizovať svoje štýly v rôznych moduloch. Napríklad môžeš vytvoriť commonStyles.js a exportovať tam svoje základné štýly:

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

Teraz môžeš flexCenter vložiť do inej komponenty.

10. Testovanie a prispôsobovanie

Načítaj svoju aplikáciu v prehliadači a skontroluj, či sú štýly správne zobrazené. Skúšaj rôzne štýly a sleduj výsledok v reálnom čase.

Zhrnutie

S kombináciou Emotion a React je možné vytvoriť realistické UI rozloženia. Emotion umožňuje definovať CSS priamo v JavaScripte a efektívne ho spravovať. Môžeš tak profitovať z výhod screen dĺžky a tesnej integrácie medzi logikou a štýlom.