Frontend Academy · Lektion

CSS-in-JS: Styled-components och Emotion

Skriv komponentstilar som taggade mallsträngar med styled-components eller använd css-propen med Emotion, och använd props för dynamiska stilar.

Lektion 3 av 413 steg

CSS-in-JS: Styled-components och Emotion är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är CSS-in-JS?

CSS-in-JS innebär att komponentstilar skrivs direkt i JavaScript/TypeScript. Stilarna ligger tillsammans med komponenterna, stöder dynamiska värden från props och avgränsas automatiskt. De två populäraste biblioteken är styled-components och Emotion.

Grunderna i styled-components

Använd taggade template literals för att definiera styled components. Resultatet är en React-komponent som renderar ett HTML-element med de tillämpade stilarna.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#6366f1' : 'white'};
  color: ${props => props.primary ? 'white' : '#6366f1'};
  padding: 8px 16px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

<Button primary>Primary</Button>
<Button>Outline</Button>

Emotion – css-prop

Emotions css-prop tillämpar stilar på valfritt JSX-element. Kräver pragmat @emotion/react eller Babel-förinställningen.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function Card({ featured }: { featured?: boolean }) {
  return (
    <div css={css`
      padding: 16px;
      border-radius: 8px;
      border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
    `}>
      Content
    </div>
  );
}

Dynamiska stilar från props

Båda biblioteken kan läsa props för att beräkna stilar. Detta är deras främsta fördel jämfört med statisk CSS – ingen klassväxling behövs.

Tematisering med ThemeProvider

Styled-components och Emotion stöder båda en ThemeProvider som injicerar temavärden i alla styled components.

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Access in styled component:
const Card = styled.div`
  background: ${props => props.theme.colors.bg};
  padding: ${props => props.theme.space.md}px;
`;

Utöka styled components

Utöka en befintlig styled component för att skapa en variant utan att duplicera stilar.

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
`;

const DangerButton = styled(Button)`
  background: #e53e3e;
  color: white;
`;

Globala stilar

Använd createGlobalStyle (styled-components) eller Global (Emotion) för global CSS, till exempel body-stilar och resets.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui; }
`;

<><GlobalStyle /><App /></>

CSS-in-JS-kostnad vid körning

CSS-in-JS-bibliotek injicerar stilar vid körning via JavaScript. Detta medför CPU-kostnad för parsning och stilinjicering samt ökar storleken på JavaScript-paketet. Alternativ utan runtime (vanilla-extract, linaria) genererar statisk CSS vid byggtillfället.

Alternativ utan runtime

vanilla-extract: skriv stilar i TypeScript, som kompileras till statisk CSS. linaria: CSS-in-JS-syntax som kompileras till CSS Modules. Båda ger CSS-in-JS-ergonomi utan overhead vid körning.

TypeScript med styled-components

Definiera en ThemeType och utöka DefaultTheme-gränssnittet från styled-components för fullständigt typade teman.

import 'styled-components';
import { theme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends typeof theme {}
}

När ska CSS-in-JS väljas?

CSS-in-JS passar utmärkt för: dynamiska stilar som styrs av JavaScript-värden vid körning, designsystem med stora behov av tematisering samt team som föredrar JS-först-arbetsflöden. Kostnaden vid körning är vanligtvis acceptabel för gränssnitt där prestanda inte är kritisk.

Snabbkontroll

Vilken är den främsta avvägningen med CSS-in-JS-bibliotek som körs vid runtime jämfört med statiska CSS-lösningar?

Besvara frågan i den interaktiva lektionen

Sammanfattning: CSS-in-JS

Styled-components: taggade template literals som renderar ett stylat React-element. Emotion: css-prop eller styled-API. Dynamiska stilar från props eliminerar klassväxling. ThemeProvider injicerar temavärden. createGlobalStyle används för global CSS. Kostnaden vid körning är den främsta avvägningen. Alternativ utan runtime: vanilla-extract, linaria.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”CSS-in-JS: Styled-components och Emotion” gratis?

Ja – hela texten till ”CSS-in-JS: Styled-components och Emotion” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”CSS-in-JS: Styled-components och Emotion”?

Skriv komponentstilar som taggade mallsträngar med styled-components eller använd css-propen med Emotion, och använd props för dynamiska stilar. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”CSS-in-JS: Styled-components och Emotion”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

BEM-metodiken: Block Element Modifier
CSS Modules: begränsade klassnamn
CSS-in-JS: Styled-components och Emotion
Tailwind CSS: utility-first-metoden

← Tillbaka till Frontend Academy