Contactez-nous

CSS-in-JS : Styled Components, Emotion (Principes et exemples)

Plongez dans le CSS-in-JS : écrivez vos styles directement en JavaScript avec Styled Components ou Emotion pour des composants React encapsulés et dynamiques.

Repenser le styling : Le CSS dans le javascript

Le CSS-in-JS représente un changement de paradigme par rapport aux approches traditionnelles de stylisation. Au lieu de maintenir des feuilles de style séparées (.css, .scss) et de les lier aux composants via des sélecteurs de classes (`className`), le CSS-in-JS propose d'écrire les styles directement au sein des fichiers JavaScript, souvent en utilisant la puissance des template literals ou des objets JavaScript. Cette approche vise à résoudre plusieurs problématiques rencontrées avec le CSS global, comme les conflits de noms, la gestion des dépendances de styles et la suppression du CSS inutilisé.

Les bibliothèques CSS-in-JS les plus populaires, telles que Styled Components et Emotion, permettent de créer de véritables composants React dont le style est intrinsèquement lié à leur définition. L'idée fondamentale est de créer des composants qui encapsulent à la fois la structure (JSX), le comportement (logique JS) et l'apparence (CSS). Cela favorise une meilleure colocation et une modularité accrue.

Les principes clés du CSS-in-JS incluent généralement : l'encapsulation des styles (les styles sont scopés par défaut au composant, évitant les fuites globales), le stylisme dynamique (possibilité d'adapter facilement les styles en fonction des props ou de l'état du composant), et l'utilisation de toute la puissance de JavaScript (variables, fonctions, logique) pour générer le CSS.

Styled components : Créer des composants stylisés

Styled Components est l'une des bibliothèques CSS-in-JS les plus répandues. Elle utilise les tagged template literals de JavaScript (ES6) pour définir les styles. Vous importez une fonction `styled` depuis la bibliothèque, puis vous l'utilisez pour créer de nouveaux composants React basés sur des éléments HTML existants ou même d'autres composants React.

Voici un exemple simple pour créer un bouton stylisé :

import React from 'react';
import styled from 'styled-components';

// Crée un composant 
       
      {/* La prop 'primary' est utilisée pour le style dynamique */}
); } export default MonInterface;

Dans cet exemple, `styled.button` crée un nouveau composant `Button`. Les styles sont écrits dans le template literal. Notez comment les props (ici, `primary`) peuvent être accédées via une fonction d'interpolation `${props => ...}` pour appliquer des styles conditionnels. Styled Components génère automatiquement des noms de classes uniques et injecte les styles nécessaires dans le DOM.

Emotion : Flexibilité et performance

Emotion est une autre bibliothèque CSS-in-JS très populaire, souvent appréciée pour sa flexibilité et ses performances. Elle offre plusieurs façons d'écrire des styles.

Une approche similaire à Styled Components est disponible via le paquet `@emotion/styled` :

import React from 'react';
import styled from '@emotion/styled';

const Card = styled.div`
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: ${props => props.theme.colors.backgroundCard || 'white'};
  color: ${props => props.theme.colors.text || 'black'};
`;

// Utilisation (souvent avec un ThemeProvider pour injecter le thème)
function Contenu() {
  return (
    
      Contenu de la carte...
    
  );
}

export default Contenu;

Emotion propose également une approche différente et très puissante avec la prop `css` (via le paquet `@emotion/react`). Cela permet d'appliquer des styles directement sur un élément JSX sans avoir à créer un composant stylisé distinct au préalable. On peut utiliser la fonction `css` importée ou directement un objet de style.

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

const couleurTitre = 'darkblue';

function TitreSection({ children }) {
  return (
    

      {children}
    


    // Alternative avec un objet de style
    // 

    //   {children}
    // 

  );
}

export default TitreSection;

Le pragma `/** @jsxImportSource @emotion/react */` (ou une configuration Babel) est nécessaire pour que la prop `css` fonctionne correctement. Emotion, comme Styled Components, gère l'injection de styles et le scoping.

Le choix entre Styled Components, Emotion, ou d'autres solutions CSS-in-JS dépend souvent des préférences de l'équipe, des besoins spécifiques du projet en termes de performance ou de fonctionnalités (theming, SSR, etc.), et de la syntaxe préférée (template literals vs object styles vs prop `css`).