Emotioniga stiilimine Reacti komponentidele

Soovite käsitleda React-komponentide tüülimist kaasaegsel ja võimsal viisil? Raamatukoguga Emotion saate oma React-komponentidesse CSS-i otse integreerida ja kujundada oma kasutajaliidest tõhusalt. Selles juhendis selgitame teile Emotioni tüülimise põhitõdesid, selle raamatukogu installimist ja kasutamist ning anname mõned kasulikud näpunäited.

Põhilised järeldused

• Emotion võimaldab kirjutada CSS-i JavaScriptis ja pakub intuitiivset käsitlemist.
• Emotioniga saate kasutada erinevaid tüülimistehnikaid, sealhulgas mallipõhised literaalid ja css-prop-i kasutamise.
• Stiili haldus muutub Emotioni kasutamisel moodularsemaks, parandades taaskasutatavust ja loetavust.

Samm-sammuline juhend

1. Emotioni installimine

Esmalt peate Emotioni oma projekti installima. Avage käsulisel ja liikuge projekti kausta. Siin käivitage järgmine käsk, et installida Emotioni raamatukogu:

npm install @emotion/react @emotion/styled

2. CSS-i importimine

Oma App.jsx-failis saate kasutada Emotioni. Peate Emotioni importima, et kasutada css-funktsiooni ja impordi styled-elementi. Lisage järgmine faili algusesse:

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

3. Tülimine mallipõhiste literaalidega

Kasutage Emotioni css-funktsiooni, et luua CSS-muutuja. Määrake CSS konventsioonid, kasutades mallipõhiseid literaale. Siin on näide, kuidas saate oma rakenduse jaoks ümbrisklassi kirjutada:

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

See kood kasutab flexboxi, et tagada paigutuse kujundamine.

4. Stiili rakendamine

Määratletud stiili rakendamiseks andke appStyle muutuja className-omadus oma põhile HTML elemendile. Siin on, kuidas see välja peaks nägema:

function App() { return <div css={appStyle}>Tere, maailm!</div>;
}

5. Styled-Componentsi kasutamine

Lisaks css-muutuja kasutamisele saate Emotioniga kasutada ka Styled-Componentsi. Et luua Styled-komponent, saate kasutada järgmist koodi:

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

Sellega muutub Container uueks CSS-i põhiseks komponendiks, millel on kõik määratletud stiilid.

6. Meediapäringute lisamine

Emotion võimaldab meediapäringuid lihtsalt oma CSS-i integreerida. Lisage need lihtsalt mallipõhise literaali sisse:

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

See meediapäring muudab teksti suurust, kui ekraani laius on alla 600 pikslit.

7. Hover-efektide rakendamine

Samuti saate hõlpsalt määratleda hover-efekte oma CSS-mallides:

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

See CSS reegel muudab elemendi taustavärvi hiirega liikumise ajal.

8. Kombineeri keerukamate stiilidega

Emotion võimaldab mitme klassinime kombineerimist. Selle saab teha cx-funktsiooniga:

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

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

Antud juhul kuvatakse tekst nii siniselt kui ka punaselt.

9. Tuleviku laiendused

Kui tulevikus juhite suurt projekti, võib olla kasulik korraldada oma stiilid erinevatesse moodulitesse. Näiteks võite luua commonStyles.js ja eksportida oma põhistiilid sinna:

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

Nüüd saate flexCenter'i lisada mis tahes muus komponendis.

10. Testid ja kohandused

Laadige oma rakendus brauserisse ja kontrollige, kas stiilid kuvatakse õigesti. Katsetage erinevate stiilidega ja vaadake tulemust reaalajas.

Kokkuvõte

Kasutades Emotioni ja Reacti kombinatsiooni, on võimalik luua järjest realistlikumaid kasutajaliidese kujundusi. Emotion võimaldab defineerida ja tõhusalt hallata CSS-i otse JavaScriptis ning kasu saada ekraanitiheduse eelistest ja loogika ja stiili tihedast integreerimisest.