CSS Academy · Leçon

Styled-components : littéraux de modèle balisés

Créez des composants React stylisés à l’aide de littéraux de modèle balisés avec la bibliothèque styled-components.

Styled-components : littéraux de modèle balisés est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que styled-components ?

styled-components est une bibliothèque CSS-in-JS pour React qui vous permet d’écrire du CSS directement dans des fichiers JavaScript à l’aide de littéraux de gabarit balisés. Chaque composant stylisé reçoit automatiquement des noms de classes uniques.

Littéraux de gabarit balisés

Les littéraux de gabarit balisés de JavaScript permettent à une fonction de traiter une chaîne de gabarit. styled-components les utilise pour analyser le CSS :

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

Styles dynamiques avec des propriétés

Accédez aux propriétés du composant dans le littéral de gabarit pour appliquer des styles dynamiques :

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

Alternative avec les propriétés personnalisées CSS

Pour les valeurs dynamiques simples, préférez les propriétés personnalisées CSS à une logique pilotée par les propriétés du composant : cette approche est plus performante et réduit l’interpolation JavaScript :

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

Étendre les styles

Étendez un composant stylisé existant pour lui ajouter des styles :

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

Imbrication et sélecteur &

styled-components prend en charge l’imbrication de type Sass en utilisant & pour faire référence au parent :

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

Définissez des styles globaux (réinitialisations et styles de base) à l’aide de createGlobalStyle :

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components fournit un ThemeProvider pour accéder aux jetons de thème dans les composants :

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

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

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

Considérations relatives aux performances

styled-components génère les noms de classes au moment de l’exécution. Pour les applications où les performances sont essentielles, envisagez une extraction statique à l’aide du module d’extension Babel ou passez à des solutions sans exécution comme Vanilla Extract ou les CSS Modules.

Rendu côté serveur

styled-components prend en charge le SSR grâce à l’API ServerStyleSheet, qui collecte et injecte les styles lors du rendu côté serveur afin d’éviter l’affichage furtif d’un contenu sans style.

Alternatives et écosystème

L’écosystème styled-components comprend notamment : emotion (API similaire), linaria (sans exécution), Vanilla Extract (sécurité des types) et Panda CSS (axé sur les utilitaires). Chacune de ces solutions établit un compromis différent entre la surcharge à l’exécution, la DX et les performances.

Vérification rapide

Comment styled-components évite-t-il les collisions de noms de classes entre les composants ?

Récapitulatif

styled-components utilise des littéraux de gabarit balisés pour définir le CSS à côté des composants React. Les propriétés des composants peuvent piloter des styles dynamiques grâce aux interpolations JavaScript. Les composants peuvent être étendus, imbriqués et adaptés au thème via ThemeProvider. En production, envisagez le module d’extension Babel pour l’extraction statique et la prise en charge du rendu côté serveur. Pour les solutions sans exécution, évaluez Vanilla Extract ou les CSS Modules.

Questions Fréquemment Posées

La leçon « Styled-components : littéraux de modèle balisés » est-elle gratuite ?

Oui — le texte complet de « Styled-components : littéraux de modèle balisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Styled-components : littéraux de modèle balisés » ?

Créez des composants React stylisés à l’aide de littéraux de modèle balisés avec la bibliothèque styled-components. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Styled-components : littéraux de modèle balisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Styled-components : littéraux de modèle balisés
Emotion : css() et styled()
Modules CSS : styles à portée limitée
Vanilla Extract : CSS-in-JS sans exécution

← Retour à CSS Academy