Emotion: css() og styled()
Bruk dynamiske stiler med hjelpefunksjonen css() og komponentfabrikken styled() fra Emotion.
Emotion: css() og styled() er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er Emotion?
Emotion er et CSS-in-JS-bibliotek med et fleksibelt API. Det tilbyr to hovedtilnærminger: css()-funksjonen (uavhengig av rammeverk) og styled()-API-et (tilsvarende styled-components). Begge genererer automatisk avgrensede klassenavn.
Installere Emotion
Det finnes to pakker, avhengig av behovene Deres:
npm install @emotion/react # css prop and Global
npm install @emotion/styled # styled() API
npm install @emotion/css # framework-agnosticcss()-funksjonen
css()-funksjonen genererer et klassenavn fra et CSS-objekt eller en template literal:
import { css } from '@emotion/css';
const buttonStyle = css`
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
`;
function Button({ children }) {
return <button className={buttonStyle}>{children}</button>;
}CSS-objekter med css()
Objektsyntaks er et alternativ til template literals – nyttig for autoutfylling i TypeScript:
const cardStyle = css({
background: 'white',
borderRadius: '8px',
padding: '24px',
boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});styled()-API-et
Emotions styled fungerer på samme måte som styled-components, slik at De enkelt kan migrere mellom dem:
import styled from '@emotion/styled';
const Card = styled.div`
background: white;
border-radius: 8px;
padding: 24px;
`;
const FeaturedCard = styled(Card)`
border: 2px solid gold;
`;css-prop (innebygd styling)
Emotions css-prop lar Dem skrive stiler direkte på JSX-elementer – uten å trenge en ekstra komponent. Dette krever pakken @emotion/react og en Babel-/SWC-plugin:
/** @jsxImportSource @emotion/react */
function Component() {
return (
<div css={{ background: 'white', padding: '24px' }}>
Content
</div>
);
}Dynamiske stiler med Emotion
Begge API-ene godtar funksjoner som mottar props for dynamiske verdier:
const Badge = styled.span`
background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
color: white;
padding: 2px 8px;
border-radius: 9999px;
`;Globale stiler
Bruk Global fra @emotion/react for global CSS:
import { Global, css } from '@emotion/react';
function App() {
return (
<>
<Global styles={css`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
`} />
</>
);
}Emotion sammenlignet med styled-components
Emotion og styled-components har nesten identiske API-er. Emotion har litt bedre ytelse i ytelsesmålinger, mindre pakkestørrelse og css-propen som et ekstra API. Begge er velprøvde valg for React-apper i produksjon.
Keyframes i Emotion
Definer animasjoner med hjelpefunksjonen keyframes:
import { keyframes, css } from '@emotion/react';
const bounce = keyframes`
from { transform: translateY(0); }
to { transform: translateY(-20px); }
`;
const animated = css`
animation: ${bounce} 1s ease-in-out infinite alternate;
`;Gjengivelse på serversiden
Emotion støtter SSR gjennom extractCriticalToChunks(), som samler inn og setter inn kritisk CSS under gjengivelse på serversiden i React-rammeverk som Next.js.
Kort kontroll
Hva er den viktigste forskjellen mellom Emotions css()-funksjon og styled()-API?
Oppsummering
Emotion tilbyr to hoved-API-er for styling: css() genererer klassenavn (som brukes via className), mens styled() oppretter stylede React-komponenter. css-propen gjør det mulig å skrive stiler på en måte som ligner inline-stiler, med full støtte for CSS. Emotion er svært kompatibelt med styled-components når det gjelder API-flate, og er ofte raskere. Begge tilnærmingene avgrenser stilene automatisk med genererte klassenavn.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Emotion: css() og styled()» gratis?
Ja – hele teksten i «Emotion: css() og styled()» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Emotion: css() og styled()»?
Bruk dynamiske stiler med hjelpefunksjonen css() og komponentfabrikken styled() fra Emotion. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Emotion: css() og styled()»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Styled-components: merkede template-literals
- Emotion: css() og styled()
- CSS Modules: avgrensede stiler
- Vanilla Extract: CSS-in-JS uten kjøretidskostnad