Emotion-biblioteket forenkler bruken av CSS i React og legger også til noen nyttige syntaksfunksjoner.
Å style en React-applikasjon kan være utfordrende, spesielt hvis du ønsker å holde stilene dine organisert og vedlikeholdbar. For å forenkle denne prosessen tilbyr Emotion-biblioteket en abstraksjon på høyere nivå på toppen av CSS.
Hva er følelser?
Emotion er et bibliotek for styling av React-applikasjoner som gir en enkel og effektiv måte å administrere stilene dine på. Den lar deg skrive CSS i JavaScript og gir en fleksibel API for styling av komponentene dine.
En av hovedfordelene med å bruke Emotion til å style React-applikasjonen din, er at den gir en mer effektiv måte å administrere stilene dine på. Du kan for eksempel bruke identiske klassenavn i flere komponenter uten risiko for navnekollisjoner som oppstår når du jobber med CSS/SASS.
Emotion-biblioteket bruker stilene dine bare på komponentene som bruker dem i stedet for hele siden. Dette kan hjelpe deg med å unngå konflikter med andre stiler på siden og gjøre koden din mer modulær og gjenbrukbar.
Hvordan installere Emotion
For å legge til Emotion-biblioteket til React-applikasjonen din, kjør følgende terminalkommando:
npm install --save @emotion/react
Emotion-biblioteket skal nå være installert i prosjektet ditt og klart til bruk for å style React-applikasjonen din.
Styling ved å bruke Emotions css Prop
Når du har installert Emotion-biblioteket, vil du kunne bruke css prop for å style React-applikasjonen din. De css prop ligner stilrekvisitten ettersom du kan sende stiler til den i form av strenger eller vanlige JavaScript-objekter.
For å style applikasjonen din ved å bruke css prop, må du importere den fra @følelse/reager bibliotek, og definer stilene dine:
/** @jsxImportSource @følelse/reager */
import Reagere fra'reagere';
import {css} fra'@emotion/react';funksjonApp() {
komme tilbake (
polstring: 0.5rem 1rem;
grense: ingen;
font-familie: kursiv;
border-radius: 12px;
farge: #333333;
bakgrunnsfarge: arv;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Klikk på meg
</button>
)
}
eksportmisligholde App;
Den første linjen med kode, /** @jsxImportSource @emotion/react */, er en spesiell kommentar du bør legge til JSX-filen for å indikere at Emotion-biblioteket skal brukes som JSX-pragma for den filen.
I JSX er en pragma en funksjon som transformerer JSX-syntaksen til vanlig JavaScript. Som standard bruker React React.createElement fungere som JSX-pragmaen. Imidlertid med @jsxImportSource kommentar, kan du spesifisere en annen pragma.
I dette tilfellet @følelse/reager pragma forteller JSX å bruke jsx funksjon fra Emotion-biblioteket for å transformere JSX-koden. Ved å legge til pragmakommentaren til en JSX-fil, kan du bruke Emotion-bibliotekets CSS-in-JS-funksjoner i komponentene dine.
Knappekomponenten gjengir en knapp med litt tilpasset stil. Her, den css prop legger den tilpassede stilen til knappeelementet.
De css prop støtter også nestet styling. Nested styling lar deg skrive stiler som er nestet i hverandre.
For eksempel:
/** @jsxImportSource @følelse/reager */
import Reagere fra'reagere';
import {css} fra'@emotion/react';funksjonApp() {
komme tilbake (
polstring: 0.5rem 1rem;
grense: ingen;
font-familie: kursiv;
border-radius: 12px;
farge: #333333;
bakgrunnsfarge: arv;
margin-block-start: 2rem;
margin-block-end: 2rem;&:sveve{
farge: #e2e2e2;
bakgrunnsfarge: #333333;
}
`}>
Klikk på meg
</button>
)
}
eksportmisligholde App;
I dette eksemplet bruker erklæringen av svevestilen den nestede stilfunksjonen til css rekvisitt. Bakgrunnen og skriftfargen i kodeblokken ovenfor vil endres når du holder musepekeren over knappen.
Sende objektstiler til css Prop
De css prop godtar også vanlige JavaScript-objektstiler. Når du stiler flere komponenter, lar bruk av objektstiler deg gjenbruke stiler i komponentene dine.
For å sende objektstiler til css prop, definer stilene som et JavaScript-objekt og send det til prop:
konst stil = {
polstring: '0.5rem 1rem',
grense: 'ingen',
fontFamily: 'kursiv',
borderRadius: '12px',
farge: '#333333',
bakgrunnsfarge: 'arve',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:sveve': {
farge: '#e2e2e2',
bakgrunnsfarge: '#333333',
}
}
komme tilbake ("app">
Merk at CSS-egenskapsnavnene er camelCased i stedet for bindestrek. Dette er fordi stilene er definert som JavaScript-objekter, som bruker camelCase-navnekonvensjoner.
Styling ved hjelp av stilede komponenter
Emotion-biblioteket bruker også stylede komponenter ved styling av React-applikasjoner. Bruk av stilede komponenter ligner på React-komponenter, bortsett fra det faktum at de inneholder stiler ut av esken. For å lage stilede komponenter, bruker du stylet funksjon.
De stylet funksjonen lar deg lage gjenbrukbare stylede komponenter. For å bruke stylet funksjon, importer den fra følelser/stilt bibliotek.
For å få @følelse/stilt biblioteket i applikasjonen din, vil du installere det i prosjektet ditt. Du kan gjøre dette ved å kjøre følgende kommando i prosjektets terminal:
npm installer @emotion/styled
Etter å ha installert @følelse/stilt bibliotek, importer stylet funksjon og definer stilene dine:
import stylet fra"@emotion/stilt";konst Button = styled.button({
polstring: '0.5rem 1rem',
grense: 'ingen',
fontFamily: 'kursiv',
borderRadius: '12px',
farge: '#333333',
bakgrunnsfarge: 'arve',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:sveve': {
farge: '#e2e2e2',
bakgrunnsfarge: '#333333',
}
})
eksportmisligholde Knapp;
I kodeblokken ovenfor, en stylet komponent Knapp er skapt. Du kan bruke denne knappen i React-applikasjonen din som alle andre React-komponenter.
Som så:
import Reagere fra'reagere';
import Knapp fra'./Knapp';funksjonApp() {
komme tilbake (
eksportmisligholde App;
Gjengivelse av App komponenten vil vise en knapp med stilene definert i Knapp komponent på skjermen.
De stylet funksjonen godtar også strengstiler. Det ser annerledes ut enn tilnærmingen til objektstiler, men fungerer på samme måte.
import stylet fra"@emotion/stilt";konst Knapp = stylet.knapp`
polstring: 0.5rem 1rem;
grense: ingen;
font-familie: kursiv;
border-radius: 12px;
farge: #333333;
bakgrunnsfarge: arv;
margin-block-start: 2rem;
margin-block-end: 2rem;&:sveve {
farge: #e2e2e2;
bakgrunnsfarge: #333333;
}
`
eksportmisligholde Knapp;
Effektiv styling med følelser
Emotion er et kraftig bibliotek for styling av React-komponenter som gir en enkel og effektiv måte å administrere stilene dine på. Enten du er nybegynner eller erfaren utvikler, kan Emotion bidra til å forenkle prosessen med å style React-applikasjonen din og gjøre det enklere å vedlikeholde og skalere koden din.
Så hvis du leter etter en mer effektiv og fleksibel måte å style React-komponentene dine på, bør du vurdere Emotion.
