Emotion : css() et styled()
Appliquez des styles dynamiques avec l’assistant css() et la fabrique de composants styled() d’Emotion.
Emotion : css() et styled() est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 qu'Emotion ?
Emotion est une bibliothèque CSS-in-JS dotée d'une API flexible. Elle propose deux approches principales : la fonction css() (indépendante de tout framework) et l'API styled() (similaire à styled-components). Les deux génèrent automatiquement des noms de classe limités à leur portée.
Installer Emotion
Deux packages sont disponibles selon vos besoins :
npm install @emotion/react # css prop and Global
npm install @emotion/styled # styled() API
npm install @emotion/css # framework-agnosticLa fonction css()
La fonction css() génère un nom de classe à partir d'un objet CSS ou d'un littéral de modèle :
import { css } from '@emotion/css';
const buttonStyle = css`
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
`;
function Button({ children }) {
return <button className={buttonStyle}>{children}</button>;
}Objets CSS avec css()
La syntaxe objet est une alternative aux littéraux de modèle — utile pour l'autocomplétion TypeScript :
const cardStyle = css({
background: 'white',
borderRadius: '8px',
padding: '24px',
boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});API styled()
La fonction styled d'Emotion fonctionne de manière identique à styled-components, ce qui facilite la migration de l'un vers l'autre :
import styled from '@emotion/styled';
const Card = styled.div`
background: white;
border-radius: 8px;
padding: 24px;
`;
const FeaturedCard = styled(Card)`
border: 2px solid gold;
`;Propriété css (styles en ligne)
La propriété css d'Emotion vous permet d'écrire des styles directement sur des éléments JSX — sans composant supplémentaire. Elle nécessite le package @emotion/react et une extension Babel/SWC :
/** @jsxImportSource @emotion/react */
function Component() {
return (
<div css={{ background: 'white', padding: '24px' }}>
Content
</div>
);
}Styles dynamiques avec Emotion
Les deux API acceptent des fonctions qui reçoivent des propriétés pour gérer des valeurs dynamiques :
const Badge = styled.span`
background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
color: white;
padding: 2px 8px;
border-radius: 9999px;
`;Styles globaux
Utilisez Global de @emotion/react pour le CSS global :
import { Global, css } from '@emotion/react';
function App() {
return (
<>
<Global styles={css`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
`} />
</>
);
}Emotion ou styled-components
Les API d'Emotion et de styled-components sont presque identiques. Emotion offre de meilleures performances dans les tests de performance, une taille de paquet plus réduite et la propriété css comme API supplémentaire. Les deux constituent des choix éprouvés en production pour les applications React.
Animations par images clés dans Emotion
Définissez des animations avec l'outil keyframes :
import { keyframes, css } from '@emotion/react';
const bounce = keyframes`
from { transform: translateY(0); }
to { transform: translateY(-20px); }
`;
const animated = css`
animation: ${bounce} 1s ease-in-out infinite alternate;
`;Rendu côté serveur
Emotion prend en charge le SSR grâce à extractCriticalToChunks(), qui permet de collecter et d'injecter le CSS critique lors du rendu côté serveur dans des frameworks React comme Next.js.
Vérification rapide
Quelle est la différence essentielle entre la fonction css() d'Emotion et son API styled() ?
Récapitulatif
Emotion propose deux API principales de styles : css() génère des noms de classe (à appliquer via className), tandis que styled() crée des composants React stylisés. La propriété css permet une écriture similaire aux styles en ligne, avec toute la puissance de CSS. Emotion est très compatible avec styled-components au niveau de l'API et est souvent plus rapide. Les deux approches limitent automatiquement la portée des styles au moyen de noms de classe générés.
Questions Fréquemment Posées
La leçon « Emotion : css() et styled() » est-elle gratuite ?
Oui — le texte complet de « Emotion : css() et styled() » 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 « Emotion : css() et styled() » ?
Appliquez des styles dynamiques avec l’assistant css() et la fabrique de composants styled() d’Emotion. 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 2 sur 4.
Combien de temps prend la leçon « Emotion : css() et styled() » ?
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