Styled Components

Une bibliothèque CSS-in-JS qui révolutionne le style des applications React en permettant d'écrire du CSS directement dans vos composants.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Styled Components ?

Imaginez que vous êtes un développeur web qui doit créer des interfaces utilisateur pour un site ou une application. Traditionnellement, vous devriez jongler entre des fichiers HTML pour la structure et des fichiers CSS séparés pour le style.

Styled Components résout ce problème en vous permettant d'écrire le style directement là où vous créez vos composants, dans le même fichier. C'est comme si vous pouviez attacher une garde-robe personnalisée à chaque élément de votre interface.

Pourquoi est-ce révolutionnaire ?

Styles isolés

Chaque composant possède ses propres styles, ce qui évite les conflits et les effets secondaires inattendus.

Dynamisme

Les styles peuvent changer dynamiquement en fonction des données et des interactions utilisateur.

En résumé, Styled Components permet aux développeurs de créer des interfaces plus cohérentes et plus faciles à maintenir, où chaque élément visuel sait exactement comment il doit s'afficher, sans dépendre de feuilles de style globales complexes.

Pour les développeurs

Fonctionnement technique

Styled Components est une bibliothèque CSS-in-JS qui utilise des template literals ES6 et la puissance de JavaScript pour styliser vos composants React. Elle génère automatiquement des noms de classes uniques et injecte du CSS réel dans le DOM lors de l'exécution.

Les concepts fondamentaux

Création de composants stylisés

La fonction de base de Styled Components est de créer des composants React avec des styles attachés, en utilisant des template literals balisés.

Composant stylisé de base

// Création d'un composant stylisé
import styled from 'styled-components';

// Création d'un bouton à partir d'un élément button HTML
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: #4338ca;
  }
`;

// Utilisation du composant stylisé
function App() {
  return <Button>Cliquez-moi</Button>;
}

Styles basés sur les props

Vous pouvez rendre vos styles dynamiques en fonction des props transmises au composant, ce qui permet une personnalisation conditionnelle.

Styles dynamiques avec props

// Utilisation des props pour personnaliser les styles
import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: ${props => props.primary ? '#4f46e5' : 'transparent'};
  color: ${props => props.primary ? 'white' : '#4f46e5'};
  border: 2px solid #4f46e5;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background-color: ${props => props.primary ? '#4338ca' : 'rgba(79, 70, 229, 0.1)'};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Bouton primaire</Button>
      <Button>Bouton secondaire</Button>
    </div>
  );
}

Extension de composants

Vous pouvez étendre des composants existants pour en créer de nouveaux qui héritent des styles de base tout en ajoutant leurs propres modifications.

Extension de composants

// Extension de composants existants
import styled from 'styled-components';

// Composant de base
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 500;
`;

// Extension du composant Button
const LargeButton = styled(Button)`
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
`;

// Encore plus d'extension
const IconButton = styled(Button)`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  
  svg {
    width: 1.25rem;
    height: 1.25rem;
  }
`;

Thème global

Le ThemeProvider permet de définir un thème global et de l'accéder dans tous vos composants stylisés pour maintenir une cohérence visuelle.

Utilisation des thèmes

// Utilisation du ThemeProvider
import { ThemeProvider, styled } from 'styled-components';

// Définition du thème
const theme = {
  colors: {
    primary: '#4f46e5',
    secondary: '#10b981',
    danger: '#ef4444',
    text: '#1f2937',
    background: '#ffffff',
  },
  fontSizes: {
    small: '0.875rem',
    medium: '1rem',
    large: '1.25rem',
  },
  breakpoints: {
    mobile: '480px',
    tablet: '768px',
    desktop: '1024px',
  }
};

// Composant utilisant le thème
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: ${props => props.theme.colors.primary};
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: ${props => props.theme.fontSizes.medium};
  
  @media (max-width: ${props => props.theme.breakpoints.mobile}) {
    width: 100%;
  }
`;

// Fournir le thème à l'application
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Bouton thématique</Button>
    </ThemeProvider>
  );
}

Avantages techniques

Génération de noms de classe uniques pour éviter les collisions CSS
Élimination automatique du CSS inutilisé car les styles sont liés directement aux composants
Portée des styles limitée au composant, ce qui évite les effets de bord
Support natif des préfixes vendeurs pour une meilleure compatibilité entre navigateurs
Intégration parfaite avec l'écosystème React et son modèle de composants

Exemple avancé

Voici un exemple plus complexe qui montre comment utiliser les animations, le changement de thème, et plusieurs techniques avancées de styled-components ensemble.

Exemple avancé avec thèmes et animations

// Exemple avancé avec animations et theme switching
import { useState } from 'react';
import styled, { ThemeProvider, keyframes, css } from 'styled-components';

// Thèmes clair et sombre
const lightTheme = {
  body: '#FFFFFF',
  text: '#1F2937',
  primary: '#4F46E5',
  secondary: '#10B981',
  shadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
};

const darkTheme = {
  body: '#1F2937',
  text: '#F9FAFB',
  primary: '#818CF8',
  secondary: '#34D399',
  shadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
};

// Animation de fondu
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

// Composant conteneur avec transition de thème
const Container = styled.div`
  background-color: ${props => props.theme.body};
  color: ${props => props.theme.text};
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: ${props => props.theme.shadow};
  transition: all 0.3s ease;
  animation: ${fadeIn} 0.5s ease-in;
`;

// Bouton avec styles conditionnels basés sur les props
const Button = styled.button`
  padding: 0.75rem 1.5rem;
  background-color: ${props => props.secondary ? props.theme.secondary : props.theme.primary};
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  ${props => props.fullWidth && css`
    width: 100%;
    margin-top: 1rem;
  `}
`;

// Composant de carte avec nested styling
const Card = styled.div`
  margin-top: 1.5rem;
  padding: 1.5rem;
  background-color: ${props => props.theme.body === '#FFFFFF' ? '#F9FAFB' : '#374151'};
  border-radius: 0.5rem;
  
  h3 {
    margin-top: 0;
    color: ${props => props.theme.primary};
  }
  
  p {
    line-height: 1.6;
  }
`;

function ThemeSwitcher() {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  
  return (
    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
      <Container>
        <h2>Exemple de changement de thème</h2>
        <Button onClick={() => setIsDarkTheme(!isDarkTheme)}>
          Basculer vers thème {isDarkTheme ? 'clair' : 'sombre'}
        </Button>
        
        <Card>
          <h3>Styled Components est puissant</h3>
          <p>
            Cette carte utilise le thème courant et adapte ses styles en conséquence.
            Vous pouvez voir comment les couleurs et ombres changent.
          </p>
          <Button secondary fullWidth>Action secondaire</Button>
        </Card>
      </Container>
    </ThemeProvider>
  );
}

Applications concrètes

Cas d'usage

Applications React complexes

Idéal pour les grandes applications React où la maintenance des styles peut devenir complexe et où l'isolation des styles par composant est cruciale.

Systèmes de design

Parfait pour créer et maintenir des systèmes de design cohérents avec des thèmes personnalisables et des composants réutilisables.

Interfaces dynamiques

Excellent pour les interfaces qui nécessitent des changements de style conditionnels basés sur l'état de l'application ou les interactions utilisateur.