Emotion-biblioteket förenklar din användning av CSS i React och lägger till några praktiska syntaxfunktioner också.
Att styla en React-applikation kan vara utmanande, speciellt om du vill hålla dina stilar organiserade och underhållbara. För att förenkla denna process tillhandahåller Emotion-biblioteket en abstraktion på högre nivå ovanpå CSS.
Vad är känsla?
Emotion är ett bibliotek för styling av React-applikationer som ger ett enkelt och effektivt sätt att hantera dina stilar. Det låter dig skriva CSS i JavaScript och tillhandahåller ett flexibelt API för styling av dina komponenter.
En av de främsta fördelarna med att använda Emotion för att styla din React-applikation är att den ger ett mer effektivt sätt att hantera dina stilar. Du kan till exempel använda identiska klassnamn i flera komponenter utan risk för att namnkollisioner uppstår när du arbetar med CSS/SASS.
Emotion-biblioteket tillämpar dina stilar endast på de komponenter som använder dem istället för hela sidan. Detta kan hjälpa dig att undvika konflikter med andra stilar på sidan och göra din kod mer modulär och återanvändbar.
Hur man installerar Emotion
För att lägga till Emotion-biblioteket till din React-applikation, kör följande terminalkommando:
npm installera --save @emotion/react
Emotion-biblioteket bör nu vara installerat i ditt projekt och redo att användas för att styla din React-applikation.
Styling med hjälp av Emotions css Prop
När du har installerat Emotion-biblioteket kommer du att kunna använda css prop för att utforma din React-applikation. De css prop liknar stilpropen eftersom du kan skicka stilar till den i form av strängar eller vanliga JavaScript-objekt.
För att styla din applikation med hjälp av css prop, du måste importera den från @känsla/reagera bibliotek och definiera sedan dina stilar:
/** @jsxImportSource @känsla/reagera */
importera Reagera från'reagera';
importera {css} från'@emotion/reagera';fungeraApp() {
lämna tillbaka (
stoppning: 0.5rem 1rem;
gräns: ingen;
font-family: kursiv;
gränsradie: 12px;
Färg: #333333;
bakgrundsfärg: ärva;
marginal-block-start: 2rem;
margin-block-end: 2rem;
`}>
Klicka här
</button>
)
}
exporterastandard App;
Den första raden med kod, /** @jsxImportSource @emotion/react */, är en särskild kommentar som du bör lägga till i JSX-filen för att indikera att Emotion-biblioteket ska användas som JSX-pragman för den filen.
I JSX är en pragma en funktion som omvandlar JSX-syntaxen till vanlig JavaScript. Som standard använder React React.createElement fungerar som JSX-pragman. Men med @jsxImportSource kommentar kan du ange en annan pragma.
I det här fallet @känsla/reagera pragma säger åt JSX att använda jsx funktion från Emotion-biblioteket för att transformera JSX-koden. Genom att lägga till pragmakommentaren till en JSX-fil kan du använda Emotion-bibliotekets CSS-in-JS-funktioner i dina komponenter.
Knappkomponenten återger en knapp med lite anpassad stil. Här, den css prop lägger till den anpassade stilen till knappelementet.
De css prop stöder även kapslad styling. Kapslad stil gör att du kan skriva stilar som är kapslade i varandra.
Till exempel:
/** @jsxImportSource @känsla/reagera */
importera Reagera från'reagera';
importera {css} från'@emotion/reagera';fungeraApp() {
lämna tillbaka (
stoppning: 0.5rem 1rem;
gräns: ingen;
font-family: kursiv;
gränsradie: 12px;
Färg: #333333;
bakgrundsfärg: ärva;
marginal-block-start: 2rem;
margin-block-end: 2rem;&:sväva{
färg: #e2e2e2;
bakgrundsfärg: #333333;
}
`}>
Klicka här
</button>
)
}
exporterastandard App;
I det här exemplet använder deklarationen av hovringsstilen den kapslade stilfunktionen i css stötta. Bakgrunden och teckensnittsfärgen i kodblocket ovan kommer att ändras när du håller muspekaren över knappen.
Skicka objektstilar till css Prop
De css prop accepterar också vanliga JavaScript-objektstilar. När du utformar flera komponenter kan du återanvända stilar i dina komponenter genom att använda objektstilar.
För att skicka objektstilar till css prop, definiera stilarna som ett JavaScript-objekt och skicka det till prop:
konst stil = {
stoppning: '0.5rem 1rem',
gräns: 'ingen',
typsnittsfamilj: 'kursiv',
borderRadius: '12px',
Färg: '#333333',
bakgrundsfärg: 'ärva',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:sväva': {
Färg: '#e2e2e2',
bakgrundsfärg: '#333333',
}
}
lämna tillbaka ("app">
Observera att CSS-egenskapsnamnen är camelCased istället för avstavade. Detta beror på att stilarna är definierade som JavaScript-objekt, som använder camelCase-namnkonventioner.
Styling med hjälp av de stiliserade komponenterna
Emotion-biblioteket använder sig också av stylade komponenter vid styling av React-applikationer. Använda stiliserade komponenter liknar React-komponenter, förutom det faktum att de innehåller stilar ur lådan. För att skapa stiliserade komponenter använder du stylad fungera.
De stylad funktionen låter dig skapa återanvändbara stiliserade komponenter. Att använda stylad funktionen, importera den från känsla/stil bibliotek.
För att få @emotion/styled biblioteket i din applikation, installerar du det i ditt projekt. Du kan göra detta genom att köra följande kommando i ditt projekts terminal:
npm installera @emotion/styled
Efter att ha installerat @emotion/styled bibliotek, importera stylad funktion och definiera dina stilar:
importera stylad från"@emotion/stil";konst Button = styled.button({
stoppning: '0.5rem 1rem',
gräns: 'ingen',
typsnittsfamilj: 'kursiv',
borderRadius: '12px',
Färg: '#333333',
bakgrundsfärg: 'ärva',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:sväva': {
Färg: '#e2e2e2',
bakgrundsfärg: '#333333',
}
})
exporterastandard Knapp;
I kodblocket ovan, en formaterad komponent Knapp är skapad. Du kan använda den här knappen i din React-applikation som vilken annan React-komponent som helst.
Såhär:
importera Reagera från'reagera';
importera Knapp från'./Knapp';fungeraApp() {
lämna tillbaka (
exporterastandard App;
Rendering av App komponent kommer att visa en knapp med stilarna definierade i Knapp komponent på din skärm.
De stylad funktion accepterar också strängstilar. Det ser annorlunda ut än tillvägagångssättet med objektstilar men fungerar på liknande sätt.
importera stylad från"@emotion/stil";konst Knapp = styled.button`
stoppning: 0.5rem 1rem;
gräns: ingen;
font-family: kursiv;
gränsradie: 12px;
Färg: #333333;
bakgrundsfärg: ärva;
marginal-block-start: 2rem;
margin-block-end: 2rem;&:hover {
färg: #e2e2e2;
bakgrundsfärg: #333333;
}
`
exporterastandard Knapp;
Effektiv styling med känslor
Emotion är ett kraftfullt bibliotek för styling av React-komponenter som ger ett enkelt och effektivt sätt att hantera dina stilar. Oavsett om du är nybörjare eller erfaren utvecklare kan Emotion hjälpa till att förenkla processen med att styla din React-applikation och göra det lättare att underhålla och skala din kod.
Så om du letar efter ett mer effektivt och flexibelt sätt att styla dina React-komponenter, överväg Emotion.