Oblikovanje React komponent z Emotion

Želite spreminjati slog React-komentarjev na sodoben in učinkovit način? Z uporabo knjižnice Emotion lahko CSS neposredno integrirate v vaše React komponente in učinkovito oblikujete vaš uporabniški vmesnik. V tem navodilu vam bom predstavil osnove oblikovanja s Emotion, kako namestite in uporabite knjižnico ter vam dal nekaj koristnih nasvetov.

Najpomembnejše ugotovitve

• Emotion omogoča pisanje CSS-ja v JavaScript-u in nudi intuitivno upravljanje.
• Z Emotion-om lahko uporabite različne tehnike oblikovanja, vključno z nizkimi šabloni in uporabo lastnosti css.
• Upravljanje slogov postane modularno z uporabo Emotion-a, kar izboljša ponovno uporabo in berljivost.

Korak za korakom

1. Namestitev Emotion-a

Najprej morate namestiti Emotion v svojem projektu. Odpri terminal in se premakni v mapo svojega projekta. Tukaj izvedite spodnji ukaz, da namestite knjižnico emotion:

npm install @emotion/react @emotion/styled

2. Uvoz CSS-ja

V datoteki App.jsx lahko uporabite Emotion. Emotion morate uvoziti, da lahko uporabite funkcijo css in uvozite element styled. Na začetek datoteke dodajte to:

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

3. Oblikovanje z Nizkimi Šabloni

Uporabite funkcijo css iz Emotion-a, da ustvarite CSS spremenljivko. Določite konvencije CSS z nizkimi šabloni. Tukaj je primer, kako lahko ustvarite ovijalni razred za vašo aplikacijo:

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

Ta koda uporablja flexbox za zagotovitev postavitve postavitve.

4. Uporaba Sloga

Za uporabo določenega sloja prenesite spremenljivko appStyle v prop className vašega glavnega HTML elementa. Tako naj bi izgledalo:

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

5. Uporaba Styled-Komponente

Poleg uporabe css spremenljivke lahko uporabite tudi Styled-Komponente z Emotion-om. Za ustvarjanje Styled-Komponente lahko uporabite naslednjo kodo:

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

S tem bo Container nova komponenta, ki temelji na CSS-ju, s povsem določenimi slogi.

6. Vstavljanje Medijev

Emotion olajša vstavljanje medijev v vaš CSS. Preprosto jih dodajte v nizke šablone:

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

To medijsko poizvedbo spremeni velikost besedila, ko je prikaz širine manjši od 600 pikslov.

7. Uporaba Učinkov preko Miške

Poleg tega lahko učinke ob prehodu preprosto določite v svojih CSS-slogih:

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

Ta CSS pravilo spremeni barvo ozadja elementa ob prehodu z miško.

8. Kombiniranje Bolj Zapletenih Slogov

Emotion omogoča združevanje več imen razredov. To je mogoče s funkcijo cx:

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

const primaryStyle = css barva: modra;;

const secondaryStyle = css barva: rdeča;;

V tem primeru bo besedilo prikazano tako v modri kot tudi rdeči barvi.

9. Prihodnje razširitve

Ko upravljate velik projekt v prihodnosti, vam lahko pomaga organizirati svoje sloge v različnih modulih. Na primer, ustvarite commonStyles.js in tam izvozite svoje osnovne sloge:

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

Zdaj lahko flexCenter vstavite v katero koli drugo komponento.

10. Preizkusi in prilagoditve

Naložite svojo aplikacijo v brskalnik in preverite, ali se slogi pravilno prikažejo. Preizkusite različne sloge in si v realnem času oglejte rezultat.

Povzetek

Z združitvijo Emotion in React je zdaj mogoče ustvariti realistične UI postavitve. Emotion omogoča definiranje CSS neposredno v JavaScriptu in učinkovito upravljanje. Pri tem lahko izkoristite prednosti gostote zaslona in tesne integracije med logiko in slogom.