CSS Academy · Lektion

Emotion: css() og styled()

Anvend dynamiske typografier med Emotions hjælper css() og komponentfabrikken styled().

Lektion 2 af 413 trin

Emotion: css() og styled() er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad er Emotion?

Emotion er et CSS-in-JS-bibliotek med en fleksibel API. Det tilbyder to hovedtilgange: funktionen css() (uafhængig af rammeværk) og API'et styled() (ligner styled-components). Begge genererer automatisk afgrænsede klassenavne.

Installation af Emotion

Der findes to pakker, afhængigt af dine behov:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

Funktionen css()

Funktionen css() genererer et klassenavn ud fra et CSS-objekt eller en skabelonstreng:

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 skabelonstrenge — nyttigt til TypeScript-autofuldførelse:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

API'et styled()

Emotions styled fungerer på samme måde som styled-components, så du nemt kan migrere mellem 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 (inline-styling)

Emotions css-prop lader dig skrive stilarter direkte på JSX-elementer — uden behov for en ekstra komponent. Kræver pakken @emotion/react og et Babel/SWC-plugin:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Dynamiske stilarter med Emotion

Begge API'er accepterer funktioner, der modtager props for dynamiske værdier:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Globale stilarter

Brug Global fra @emotion/react til global CSS:

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

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion kontra styled-components

Emotion og styled-components har næsten identiske API'er. Emotion har lidt bedre ydeevne i målinger, en mindre pakkestørrelse og css-prop'en som en ekstra API. Begge er afprøvede valg til React-apps.

Keyframes i Emotion

Definér animationer med hjælpefunktionen 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;
`;

Gengivelse på serversiden

Emotion understøtter SSR via extractCriticalToChunks(), som indsamler og indsætter kritisk CSS under gengivelse på serversiden i React-rammeværker som Next.js.

Hurtigt tjek

Hvad er den vigtigste forskel på Emotions funktion css() og API'et styled()?

Besvar den i den interaktive lektion

Opsummering

Emotion tilbyder to hoved-API'er til styling: css() genererer klassenavne, som anvendes via className, og styled() opretter stylede React-komponenter. Med css-prop'en kan du skrive inline-lignende stilarter med alle CSS's muligheder. Emotion er meget kompatibel med styled-components i sin API-overflade og er ofte hurtigere. Begge tilgange afgrænser automatisk stilarter med genererede klassenavne.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Emotion: css() og styled()” gratis?

Ja — hele teksten til “Emotion: css() og styled()” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Emotion: css() og styled()”?

Anvend dynamiske typografier med Emotions hjælper css() og komponentfabrikken styled(). Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Emotion: css() og styled()”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Styled-components: Tagged Template Literals
Emotion: css() og styled()
CSS Modules: Afgrænsede typografier
Vanilla Extract: CSS-in-JS uden runtime

← Tilbage til CSS Academy