Pourquoi styled-components reste un choix pratique pour React

Souvenez-vous de ce à quoi ressemblait la mise en page dans React il y a environ sept ans. Nous avons essayé en vain d'isoler les classes CSS avec BEM, puis nous sommes passés aux CSS Modules, et ensuite styled-components est arrivé. L'idée d'écrire des styles directement dans les fichiers JS semblait folle au début. Les littéraux de gabarits JavaScript ont rapidement fait de cette approche l'une des normes du développement web.

Maintenant, Tailwind CSS et les frameworks CSS atomiques sont populaires. Pendant ce temps, le dépôt styled-components a recueilli plus de 41 000 étoiles sur GitHub et continue d'être mis à jour. Les développeurs l'utilisent activement pour la mise en page, et les mainteneurs du projet adaptent le code pour les fonctionnalités React actuelles, y compris les React Server Components (RSC).

Pourquoi remplacer le CSS familier par des templates étiquetés

Le concept de la bibliothèque est simple : vous créez un composant React qui contient déjà tous les styles nécessaires. Il n'est pas nécessaire de concevoir une hiérarchie de classes complexe ni de s'inquiéter que les styles de base d'un bouton ne cassent accidentellement un modal de l'autre côté de l'application.

La syntaxe reste du CSS propre sans guillemets ni virgules après chaque ligne :

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.$primary ? "#0070f3" : "#ffffff"};
  color: ${props => props.$primary ? "#ffffff" : "#0070f3"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #0070f3;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div>
      <Button>Обычная кнопка</Button>
      <Button $primary>Акцентная кнопка</Button>
    </div>
  );
}

Les styles sont étroitement liés au composant. Supprimez Button du projet et ses styles disparaissent avec lui. Aucun code inutilisé ne reste dans le build final.

Props, thèmes et apparence dynamique

Le point fort du CSS-in-JS se révèle là où la présentation visuelle dépend directement des données ou de l'état de l'application. Avec les CSS Modules, vous devriez basculer indéfiniment les classes via l'utilitaire classnames. Ici, les props sont passées directement dans le bloc de style.

Passer des paramètres sans conflits avec le DOM

Remarquez la syntaxe $primary de l'exemple ci-dessus. Le signe dollar désigne les props transitoires. Les variables marquées de cette façon sont utilisées dans les styles, mais la bibliothèque les filtre et ne les passe pas à la balise HTML finale. La console du navigateur reste propre sans avertissements sur les attributs inconnus.

Thématisation intégrée

Pour travailler avec les thèmes clair et sombre, il y a le composant ThemeProvider. Il transmet l'objet de paramètres dans l'arbre des composants via React Context.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    main: '#0070f3',
    background: '#f4f4f4',
  }
};

const Container = styled.div`
  color: ${props => props.theme.colors.main};
  background: ${props => props.theme.colors.background};
`;

Modifiez les couleurs dans l'objet theme et l'interface se met à jour instantanément. Cela simplifie considérablement la création de vos propres systèmes de design.

Performance et rendu côté serveur

La bibliothèque suit automatiquement quels composants sont affichés sur la page à un moment donné et ne charge que leurs styles. L'utilisateur ne télécharge pas de code supplémentaire.

Auparavant, les solutions CSS-in-JS étaient critiquées pour la charge supplémentaire lors de l'hydratation et les problèmes de SSR. Dans les versions récentes, l'équipe a réécrit la logique interne. La bibliothèque peut fonctionner avec le streaming SSR et s'entend bien avec les React Server Components. Les styles sont intégrés directement dans le flux HTML sans délais.

Quand utiliser styled-components

Voici quatre scénarios où la bibliothèque excelle :

• Vous construisez une bibliothèque de composants UI interne ou un système de design avec une personnalisation flexible.
• Le projet contient de nombreux éléments interactifs complexes dont l'état visuel change en fonction des données d'entrée.
• L'équipe est habituée à la syntaxe CSS classique mais veut une isolation fiable des styles sans configurer d'outils de build.
• Vous écrivez un projet multiplateforme avec React et React Native, en attendant d'utiliser une API unique pour les styles.

Si votre priorité est de lancer l'application sur des appareils peu puissants avec un bundle JS minimal, vous pourriez vouloir regarder Tailwind CSS ou des solutions sans runtime comme Linaria et Pigment CSS.

styled-components reste une solution claire et prévisible. La bibliothèque vous débarrasse des maux de tête liés à la nomination des classes et vous donne du CSS propre directement dans le corps du composant. Pour la plupart des tâches frontend, la puissance de l'outil est plus que suffisante.