CSS-in-JS : Styled-components et Emotion
Écrivez les styles des composants sous forme de littéraux de modèle balisés avec styled-components ou utilisez la prop css avec Emotion, puis exploitez les props pour créer des styles dynamiques.
CSS-in-JS : Styled-components et Emotion est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que le CSS-in-JS ?
Le CSS-in-JS écrit les styles des composants directement en JavaScript/TypeScript. Les styles sont regroupés avec les composants, prennent en charge les valeurs dynamiques provenant des propriétés et sont automatiquement limités à la portée du composant. Les deux bibliothèques les plus populaires sont styled-components et Emotion.
Bases de styled-components
Utilisez des littéraux de gabarit balisés pour définir des composants stylisés. Le résultat est un composant React qui génère un élément HTML auquel les styles sont appliqués.
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? '#6366f1' : 'white'};
color: ${props => props.primary ? 'white' : '#6366f1'};
padding: 8px 16px;
border: 2px solid #6366f1;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
<Button primary>Primary</Button>
<Button>Outline</Button>Emotion — propriété css
La propriété css d'Emotion applique des styles à tout élément JSX. Elle nécessite la directive @emotion/react ou le préréglage Babel.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
function Card({ featured }: { featured?: boolean }) {
return (
<div css={css`
padding: 16px;
border-radius: 8px;
border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
`}>
Content
</div>
);
}Styles dynamiques à partir des propriétés
Les deux bibliothèques peuvent lire les propriétés pour calculer les styles. C'est leur principal avantage par rapport au CSS statique : il n'est pas nécessaire de changer de classe.
Thématisation avec ThemeProvider
Styled-components et Emotion prennent tous deux en charge un ThemeProvider qui injecte les valeurs du thème dans tous les composants stylisés.
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
// Access in styled component:
const Card = styled.div`
background: ${props => props.theme.colors.bg};
padding: ${props => props.theme.space.md}px;
`;Étendre les composants stylisés
Étendez un composant stylisé existant pour créer une variante sans dupliquer les styles.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Styles globaux
Utilisez createGlobalStyle (styled-components) ou Global (Emotion) pour le CSS global, notamment les styles de body et les réinitialisations.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Coût à l'exécution du CSS-in-JS
Les bibliothèques CSS-in-JS injectent les styles à l'exécution via JavaScript. Cela ajoute un coût en CPU pour l'analyse et l'injection des styles, ainsi qu'une augmentation de la taille du paquet JavaScript. Les solutions sans exécution (vanilla-extract, linaria) génèrent du CSS statique lors de la compilation.
Solutions sans exécution
vanilla-extract : écrivez les styles en TypeScript, puis compilez-les en CSS statique. linaria : syntaxe CSS-in-JS compilée en modules CSS. Les deux offrent l'ergonomie du CSS-in-JS sans coût à l'exécution.
TypeScript avec styled-components
Définissez un ThemeType et étendez l'interface DefaultTheme de styled-components pour obtenir des thèmes entièrement typés.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Quand choisir le CSS-in-JS
Le CSS-in-JS est excellent pour les styles dynamiques pilotés par des valeurs JavaScript à l'exécution, les systèmes de conception nécessitant une thématisation poussée et les équipes qui préfèrent des méthodes de travail centrées sur JS. Le coût à l'exécution est généralement acceptable pour les interfaces qui ne sont pas critiques en matière de performances.
Vérification rapide
Quel est le principal compromis des bibliothèques CSS-in-JS à l'exécution par rapport aux solutions CSS statiques ?
Récapitulatif : CSS-in-JS
Styled-components : littéraux de gabarit balisés, génération d'un élément React stylisé. Emotion : propriété css ou API styled. Les styles dynamiques issus des propriétés évitent de changer de classe. ThemeProvider injecte les valeurs du thème. createGlobalStyle sert au CSS global. Le coût à l'exécution est le principal compromis. Solutions sans exécution : vanilla-extract, linaria.
Questions Fréquemment Posées
La leçon « CSS-in-JS : Styled-components et Emotion » est-elle gratuite ?
Oui — le texte complet de « CSS-in-JS : Styled-components et Emotion » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « CSS-in-JS : Styled-components et Emotion » ?
Écrivez les styles des composants sous forme de littéraux de modèle balisés avec styled-components ou utilisez la prop css avec Emotion, puis exploitez les props pour créer des styles dynamiques. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 3 sur 4.
Combien de temps prend la leçon « CSS-in-JS : Styled-components et Emotion » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Méthodologie BEM : bloc, élément et modificateur
- Modules CSS : noms de classes à portée limitée
- CSS-in-JS : Styled-components et Emotion
- Tailwind CSS : approche fondée sur les utilitaires