Styled-Components 15 termes

Méthode chainable qui attache des attributs par défaut ou calcules a un styled component. Évite de répéter les mêmes props a chaque utilisation.

Les réglages par défaut d'un appareil : tu les configures une fois, plus besoin d'y penser.

const Input = styled.input.attrs(({ $size }) => ({
  type: 'text',
  size: $size || '1em',
}))`
  padding: ${({ size }) => size};
  border: 1px solid #ccc;
  border-radius: 4px;
`
// <Input $size="2em" />

Cas d'usage : Définir des attributs HTML par défaut (type, role, aria-*) sur un styled component.

Écosystème de librairies CSS-in-JS alternatives : Émotion (API similaire + css prop), Stitches (variants), Vanilla Extract (zéro-runtime), Panda CSS (build-time).

Différentes marques de voiture : même but (se déplacer), moteurs et options différents.

// Emotion
import { css } from '@emotion/react'
<div css={css`color: red;`} />

// Vanilla Extract
import { style } from '@vanilla-extract/css'
const box = style({ color: 'red' })

Cas d'usage : Choisir la librairie CSS-in-JS adaptée aux contraintes du projet (perf, DX, SSR).

Prop spéciale qui change l'élément HTML rendu sans modifier les styles. Un Button styled.button peut être rendu comme un <a> avec as="a".

Un acteur qui joue différents roles avec le même costume.

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: blue;
  color: white;
`
// Rendu comme <a> avec les memes styles
<Button as="a" href="/page">Lien style</Button>
// Rendu comme un autre composant
<Button as={Link} to="/page">Nav</Button>

Cas d'usage : Réutiliser les styles d'un composant sur un élément HTML différent (button -> a, div -> section).

Fonction qui crée un composant injectant du CSS global (reset, fonts, variables). Contrairement a styled, ces styles ne sont pas scopes a un élément.

Le papier peint de l'appartement : il couvre tous les murs, pas juste un meuble.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: ${({ theme }) => theme.font};
    background: ${({ theme }) => theme.bg};
  }
`
// <GlobalStyle /> dans App

Cas d'usage : Définir le CSS reset, les styles globaux du body et les custom properties CSS.

Helper qui permet de définir des blocs de CSS réutilisables avec interpolations. Nécessaire pour les interpolations conditionnelles a l'intérieur des styled components.

Un paragraphe pre-écrit que tu peux insérer dans n'importe quelle lettre.

import styled, { css } from 'styled-components'

const truncate = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`
const Title = styled.h2`
  font-size: 1.5rem;
  ${truncate}
`

Cas d'usage : Extraire et réutiliser des blocs de styles communs entre plusieurs styled components.

Créer un nouveau styled component base sur un existant avec styled(BaseComponent). Le nouveau composant hérité de tous les styles et peut en ajouter/overrider.

Un enfant qui hérite des traits de ses parents et ajoute ses propres caractéristiques.

const Base = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
`
const Primary = styled(Base)`
  background: blue;
  color: white;
`
const Danger = styled(Base)`
  background: red;
  color: white;
`

Cas d'usage : Créer des variantes de composants qui partagent une base de styles commune.

Helper keyframes qui génère un nom d'animation unique pour éviter les collisions globales. S'utilise comme une animation CSS classique dans un styled component.

Un pas de danse avec un nom unique : personne d'autre ne peut le confondre avec le sien.

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
`
const Box = styled.div`
  animation: ${fadeIn} 0.3s ease-in-out;
`

Cas d'usage : Définir des animations CSS scopes dans styled-components sans collision de noms.

Technique utilisant les props du composant pour modifier dynamiquement les styles. Permet de créer des variantes sans classes CSS supplémentaires.

Commander un café : tu dis 'grand, lait, sans sucre' et le barista adapte la recette.

const Button = styled.button`
  padding: ${({ $size }) => $size === 'lg' ? '1rem 2rem' : '0.5rem 1rem'};
  background: ${({ $variant }) =>
    $variant === 'danger' ? 'red' : 'blue'};
  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
`
// <Button $size="lg" $variant="danger" />

Cas d'usage : Créer des composants avec plusieurs variantes (taille, couleur, état) pilotées par les props.

Configuration qui filtre les props passées au DOM. Empêche les props custom de générer des attributs HTML invalides et des warnings React.

Un videur de boite : il laisse passer les props HTML valides et refuse les custom.

import styled from 'styled-components'
import isPropValid from '@emotion/is-prop-valid'

const Box = styled('div').withConfig({
  shouldForwardProp: (prop) =>
    isPropValid(prop) && prop !== 'color',
})`
  color: ${({ color }) => color};
`

Cas d'usage : Éviter les warnings React 'Unknown prop' quand des props custom sont utilisées pour le styling.

Mécanisme d'extraction des styles générés côté serveur pour les injecter dans le HTML initial et éviter le FOUC. Avec Next.js App Router, le motif officiel est un registre : un Client Component qui crée une ServerStyleSheet et vide ses styles dans le <head> via useServerInsertedHTML, avec compiler.styledComponents: true dans next.config.js. Note : styled-components est en mode maintenance depuis le 17 mars 2025.

Préparer les vêtements la veille pour ne pas sortir en pyjama le matin (FOUC).

// lib/registry.tsx — Next.js App Router (styled-components >= 6)
'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export default function StyledRegistry({ children }) {
  const [sheet] = useState(() => new ServerStyleSheet());
  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });
  if (typeof window !== 'undefined') return <>{children}</>;
  return <StyleSheetManager sheet={sheet.instance}>{children}</StyleSheetManager>;
}

Cas d'usage : Intégrer styled-components dans un projet Next.js App Router existant sans flash de contenu non stylé.

Fonction principale qui crée un composant React avec des styles scopes. styled.div créé un div style, styled(Component) étend un composant existant.

Un décorateur qui habille un élément HTML ou un composant existant avec de nouveaux vêtements.

const Card = styled.div`
  padding: 1rem;
  border-radius: 8px;
`
// Extend un composant existant
const PrimaryCard = styled(Card)`
  background: blue;
  color: white;
`

Cas d'usage : Créer des composants React avec du CSS scope et extensible via l'héritage de styles.

Composant qui configure ou les styles sont injectes (target), active/désactivé les préfixes vendeur, et contrôle le comportement global du styling.

Le contrôleur aérien qui dirige ou chaque avion (style) doit atterrir.

import { StyleSheetManager } from 'styled-components'

<StyleSheetManager
  target={iframeRef.current.contentDocument.head}
  enableVendorPrefixes
>
  <App />
</StyleSheetManager>

Cas d'usage : Injecter les styles dans un iframe, un Shadow DOM, ou configurer les préfixes vendeur.

Syntaxe JavaScript utilisant les backticks (styled.div`...`) qui permet d'écrire du CSS réel dans JS. Le tag styled interprété le template et génère un composant React style.

Un traducteur simultanée : tu parles CSS, il convertit en composant React en temps réel.

import styled from 'styled-components'

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: ${({ $primary }) => $primary ? 'blue' : 'gray'};
  color: white;
  border-radius: 4px;
  &:hover { opacity: 0.9; }
`

Cas d'usage : Écrire du CSS scope au composant directement dans le fichier JS/TS.

Composant context React qui injecte un objet theme accessible dans tous les styled components enfants via la prop theme ou le hook useTheme.

Le thermostat central d'un bâtiment : tu règles la température une fois, toutes les pièces en bénéficient.

import { ThemeProvider } from 'styled-components'

const theme = { primary: '#3498db', radius: '8px' }

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

const Btn = styled.button`
  background: ${({ theme }) => theme.primary};
`

Cas d'usage : Centraliser les tokens de design et supporter les themes clair/sombre.

Props prefixees par $ qui ne sont pas passées au DOM. Solution simple au problème de shouldForwardProp introduite dans styled-components v5.1.

Un post-it sur un colis : le livreur le lit (pour le style) mais ne le colle pas sur la porte.

const Box = styled.div`
  background: ${({ $bg }) => $bg};
  padding: ${({ $size }) =>
    $size === 'lg' ? '2rem' : '1rem'};
`
// $bg et $size ne sont PAS passes au DOM
<Box $bg="blue" $size="lg">Contenu</Box>

Cas d'usage : Passer des props de styling sans polluer le DOM avec des attributs HTML invalides.