Emotion-biblioteket forenkler din brug af CSS i React og tilføjer også nogle praktiske syntaksfunktioner.
At style en React-applikation kan være udfordrende, især hvis du vil holde dine stilarter organiserede og vedligeholdelige. For at hjælpe med at forenkle denne proces giver Emotion-biblioteket en abstraktion på højere niveau oven på CSS.
Hvad er følelser?
Emotion er et bibliotek til styling af React-applikationer, der giver en enkel og effektiv måde at administrere dine styles på. Det giver dig mulighed for at skrive CSS i JavaScript og giver en fleksibel API til styling af dine komponenter.
En af de vigtigste fordele ved at bruge Emotion til at style din React-applikation er, at den giver en mere effektiv måde at administrere dine stilarter på. For eksempel kan du bruge identiske klassenavne i flere komponenter uden risiko for navnekollisioner, der opstår når du arbejder med CSS/SASS.
Emotion-biblioteket anvender kun dine stilarter på de komponenter, der bruger dem i stedet for hele siden. Dette kan hjælpe dig med at undgå konflikter med andre stilarter på siden og gøre din kode mere modulær og genbrugelig.
Sådan installeres Emotion
For at tilføje Emotion-biblioteket til din React-applikation skal du køre følgende terminalkommando:
npm install --save @emotion/react
Emotion-biblioteket skulle nu være installeret i dit projekt og klar til brug for at style din React-applikation.
Styling ved hjælp af Emotions css Prop
Når du har installeret Emotion-biblioteket, vil du være i stand til at bruge css prop til at style din React-applikation. Det css prop ligner stilpropen, da du kan sende stilarter til den i form af strenge eller almindelige JavaScript-objekter.
For at style din ansøgning ved hjælp af css prop, skal du importere den fra @følelse/reager bibliotek, og definer derefter dine stilarter:
/** @jsxImportSource @emotion/reager */
importere Reagere fra'reagere';
importere {css} fra'@følelse/reager';fungereApp() {
Vend tilbage (
polstring: 0.5rem 1rem;
grænse: ingen;
font-familie: kursiv;
grænse-radius: 12px;
farve: #333333;
baggrundsfarve: arve;
margin-blok-start: 2rem;
margin-blok-ende: 2rem;
`}>
Klik på Mig
</button>
)
}
eksportStandard App;
Den første kodelinje, /** @jsxImportSource @emotion/react */, er en særlig kommentar, du bør tilføje til JSX-filen for at indikere, at Emotion-biblioteket skal bruges som JSX-pragma for den fil.
I JSX er en pragma en funktion, der transformerer JSX-syntaksen til almindelig JavaScript. Som standard bruger React React.createElement fungere som JSX pragma. Dog med @jsxImportSource kommentar, kan du angive en anden pragma.
I dette tilfælde @følelse/reager pragma fortæller JSX at bruge jsx funktion fra Emotion-biblioteket til at transformere JSX-koden. Ved at tilføje pragmakommentaren til en JSX-fil kan du bruge Emotion-bibliotekets CSS-in-JS-funktioner i dine komponenter.
Knapkomponenten gengiver en knap med noget tilpasset stil. Her, den css prop tilføjer den brugerdefinerede stil til knapelementet.
Det css prop understøtter også indlejret styling. Indlejret stiling giver dig mulighed for at skrive stilarter, der er indlejret i hinanden.
For eksempel:
/** @jsxImportSource @emotion/reager */
importere Reagere fra'reagere';
importere {css} fra'@følelse/reager';fungereApp() {
Vend tilbage (
polstring: 0.5rem 1rem;
grænse: ingen;
font-familie: kursiv;
grænse-radius: 12px;
farve: #333333;
baggrundsfarve: arve;
margin-blok-start: 2rem;
margin-blok-ende: 2rem;&:hover{
farve: #e2e2e2;
baggrundsfarve: #333333;
}
`}>
Klik på Mig
</button>
)
}
eksportStandard App;
I dette eksempel bruger erklæringen af svævestilen den indlejrede stilfunktion i css rekvisit. Baggrunden og skrifttypefarven i kodeblokken ovenfor ændres, når du holder markøren over knappen.
Sende objektstile til css Prop
Det css prop accepterer også almindelige JavaScript-objektstile. Når du styler flere komponenter, giver brug af objekttypografier dig mulighed for at genbruge typografier i dine komponenter.
For at overføre objektstile til css prop, definer stilene som et JavaScript-objekt og send det til prop:
konst stil = {
polstring: '0.5rem 1rem',
grænse: 'ingen',
fontFamily: 'kursiv',
borderRadius: '12px',
farve: '#333333',
baggrundsfarve: 'arve',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:hover': {
farve: '#e2e2e2',
baggrundsfarve: '#333333',
}
}
Vend tilbage ("app">
Bemærk, at CSS-egenskabernes navne er camelCased i stedet for bindestreg. Dette skyldes, at stilene er defineret som JavaScript-objekter, som bruger camelCase-navngivningskonventioner.
Styling ved hjælp af de stylede komponenter
Emotion-biblioteket gør også brug af stylede komponenter ved styling af React-applikationer. Brug af stylede komponenter ligner React-komponenter, bortset fra det faktum, at de indeholder styles ud af æsken. For at oprette stylede komponenter skal du bruge stylet fungere.
Det stylet funktion giver dig mulighed for at skabe genbrugelige stylede komponenter. For at bruge stylet funktionen skal du importere den fra følelser/stylet bibliotek.
For at få @følelse/stilet bibliotek i din applikation, vil du installere det i dit projekt. Du kan gøre dette ved at køre følgende kommando i dit projekts terminal:
npm installer @emotion/styled
Efter installation af @følelse/stilet bibliotek, importere stylet funktion og definer dine stilarter:
importere stylet fra"@emotion/stilet";konst Button = styled.button({
polstring: '0.5rem 1rem',
grænse: 'ingen',
fontFamily: 'kursiv',
borderRadius: '12px',
farve: '#333333',
baggrundsfarve: 'arve',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:hover': {
farve: '#e2e2e2',
baggrundsfarve: '#333333',
}
})
eksportStandard Knap;
I kodeblokken ovenfor, en stylet komponent Knap er oprettet. Du kan bruge denne knap i din React-applikation som enhver anden React-komponent.
Ligesom:
importere Reagere fra'reagere';
importere Knap fra'./Knap';fungereApp() {
Vend tilbage (
eksportStandard App;
Gengivelse af App komponent vil vise en knap med de stilarter, der er defineret i Knap komponent på din skærm.
Det stylet funktion accepterer også strengstilarter. Det ser anderledes ud end tilgangen med objektstile, men fungerer på samme måde.
importere stylet fra"@emotion/stilet";konst Knap = stylet.knap`
polstring: 0.5rem 1rem;
grænse: ingen;
font-familie: kursiv;
grænse-radius: 12px;
farve: #333333;
baggrundsfarve: arve;
margin-blok-start: 2rem;
margin-blok-ende: 2rem;&:hover {
farve: #e2e2e2;
baggrundsfarve: #333333;
}
`
eksportStandard Knap;
Effektiv styling med følelser
Emotion er et kraftfuldt bibliotek til styling af React-komponenter, der giver en enkel og effektiv måde at administrere dine styles på. Uanset om du er nybegynder eller erfaren udvikler, kan Emotion hjælpe med at forenkle processen med at style din React-applikation og gøre det nemmere at vedligeholde og skalere din kode.
Så hvis du leder efter en mere effektiv og fleksibel måde at style dine React-komponenter på, så overvej Emotion.
