Methode chainable qui attache des attributs par defaut ou calcules a un styled component. Evite de repeter les memes props a chaque utilisation.
Les reglages par defaut d'un appareil : tu les configures une fois, plus besoin d'y penser.
const Input = styled.input.attrs(({ $size }) => ({
type: 'text',
size: $size || '1em',
}))`
padding: ${({ size }) => size};
border: 1px solid #ccc;
border-radius: 4px;
`
// <Input $size="2em" />Cas d'usage : Definir des attributs HTML par defaut (type, role, aria-*) sur un styled component.
Ecosysteme de librairies CSS-in-JS alternatives : Emotion (API similaire + css prop), Stitches (variants), Vanilla Extract (zero-runtime), Panda CSS (build-time).
Differentes marques de voiture : meme but (se deplacer), moteurs et options differents.
// Emotion
import { css } from '@emotion/react'
<div css={css`color: red;`} />
// Vanilla Extract
import { style } from '@vanilla-extract/css'
const box = style({ color: 'red' })Cas d'usage : Choisir la librairie CSS-in-JS adaptee aux contraintes du projet (perf, DX, SSR).
Prop speciale qui change l'element HTML rendu sans modifier les styles. Un Button styled.button peut etre rendu comme un <a> avec as="a".
Un acteur qui joue differents roles avec le meme costume.
const Button = styled.button`
padding: 0.5rem 1rem;
background: blue;
color: white;
`
// Rendu comme <a> avec les memes styles
<Button as="a" href="/page">Lien style</Button>
// Rendu comme un autre composant
<Button as={Link} to="/page">Nav</Button>Cas d'usage : Reutiliser les styles d'un composant sur un element HTML different (button -> a, div -> section).
Fonction qui cree un composant injectant du CSS global (reset, fonts, variables). Contrairement a styled, ces styles ne sont pas scopes a un element.
Le papier peint de l'appartement : il couvre tous les murs, pas juste un meuble.
import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: ${({ theme }) => theme.font};
background: ${({ theme }) => theme.bg};
}
`
// <GlobalStyle /> dans AppCas d'usage : Definir le CSS reset, les styles globaux du body et les custom properties CSS.
Helper qui permet de definir des blocs de CSS reutilisables avec interpolations. Necessaire pour les interpolations conditionnelles a l'interieur des styled components.
Un paragraphe pre-ecrit que tu peux inserer dans n'importe quelle lettre.
import styled, { css } from 'styled-components'
const truncate = css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`
const Title = styled.h2`
font-size: 1.5rem;
${truncate}
`Cas d'usage : Extraire et reutiliser des blocs de styles communs entre plusieurs styled components.
Creer un nouveau styled component base sur un existant avec styled(BaseComponent). Le nouveau composant herite de tous les styles et peut en ajouter/overrider.
Un enfant qui herite des traits de ses parents et ajoute ses propres caracteristiques.
const Base = styled.button`
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: bold;
`
const Primary = styled(Base)`
background: blue;
color: white;
`
const Danger = styled(Base)`
background: red;
color: white;
`Cas d'usage : Creer des variantes de composants qui partagent une base de styles commune.
Helper keyframes qui genere un nom d'animation unique pour eviter les collisions globales. S'utilise comme une animation CSS classique dans un styled component.
Un pas de danse avec un nom unique : personne d'autre ne peut le confondre avec le sien.
import styled, { keyframes } from 'styled-components'
const fadeIn = keyframes`
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
`
const Box = styled.div`
animation: ${fadeIn} 0.3s ease-in-out;
`Cas d'usage : Definir des animations CSS scopes dans styled-components sans collision de noms.
Technique utilisant les props du composant pour modifier dynamiquement les styles. Permet de creer des variantes sans classes CSS supplementaires.
Commander un cafe : tu dis 'grand, lait, sans sucre' et le barista adapte la recette.
const Button = styled.button`
padding: ${({ $size }) => $size === 'lg' ? '1rem 2rem' : '0.5rem 1rem'};
background: ${({ $variant }) =>
$variant === 'danger' ? 'red' : 'blue'};
opacity: ${({ disabled }) => disabled ? 0.5 : 1};
`
// <Button $size="lg" $variant="danger" />Cas d'usage : Creer des composants avec plusieurs variantes (taille, couleur, etat) pilotees par les props.
Configuration qui filtre les props passees au DOM. Empeche les props custom de generer des attributs HTML invalides et des warnings React.
Un videur de boite : il laisse passer les props HTML valides et refuse les custom.
import styled from 'styled-components'
import isPropValid from '@emotion/is-prop-valid'
const Box = styled('div').withConfig({
shouldForwardProp: (prop) =>
isPropValid(prop) && prop !== 'color',
})`
color: ${({ color }) => color};
`Cas d'usage : Eviter les warnings React 'Unknown prop' quand des props custom sont utilisees pour le styling.
Mecanisme pour extraire les styles generes cote serveur et les injecter dans le HTML initial. Evite le flash of unstyled content (FOUC) en SSR/SSG.
Preparer les vetements la veille pour ne pas sortir en pyjama le matin (FOUC).
import { ServerStyleSheet } from 'styled-components'
const sheet = new ServerStyleSheet()
try {
const html = renderToString(
sheet.collectStyles(<App />)
)
const styles = sheet.getStyleTags()
// Injecter styles dans le <head>
} finally { sheet.seal() }Cas d'usage : Integrer styled-components avec Next.js ou tout framework SSR pour eviter le FOUC.
Fonction principale qui cree un composant React avec des styles scopes. styled.div cree un div style, styled(Component) etend un composant existant.
Un decorateur qui habille un element HTML ou un composant existant avec de nouveaux vetements.
const Card = styled.div`
padding: 1rem;
border-radius: 8px;
`
// Extend un composant existant
const PrimaryCard = styled(Card)`
background: blue;
color: white;
`Cas d'usage : Creer des composants React avec du CSS scope et extensible via l'heritage de styles.
Composant qui configure ou les styles sont injectes (target), active/desactive les prefixes vendeur, et controle le comportement global du styling.
Le controleur aerien qui dirige ou chaque avion (style) doit atterrir.
import { StyleSheetManager } from 'styled-components'
<StyleSheetManager
target={iframeRef.current.contentDocument.head}
enableVendorPrefixes
>
<App />
</StyleSheetManager>Cas d'usage : Injecter les styles dans un iframe, un Shadow DOM, ou configurer les prefixes vendeur.
Syntaxe JavaScript utilisant les backticks (styled.div`...`) qui permet d'ecrire du CSS reel dans JS. Le tag styled interprete le template et genere un composant React style.
Un traducteur simultanee : tu parles CSS, il convertit en composant React en temps reel.
import styled from 'styled-components'
const Button = styled.button`
padding: 0.5rem 1rem;
background: ${({ $primary }) => $primary ? 'blue' : 'gray'};
color: white;
border-radius: 4px;
&:hover { opacity: 0.9; }
`Cas d'usage : Ecrire du CSS scope au composant directement dans le fichier JS/TS.
Composant context React qui injecte un objet theme accessible dans tous les styled components enfants via la prop theme ou le hook useTheme.
Le thermostat central d'un batiment : tu regles la temperature une fois, toutes les pieces en beneficient.
import { ThemeProvider } from 'styled-components'
const theme = { primary: '#3498db', radius: '8px' }
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
const Btn = styled.button`
background: ${({ theme }) => theme.primary};
`Cas d'usage : Centraliser les tokens de design et supporter les themes clair/sombre.
Props prefixees par $ qui ne sont pas passees au DOM. Solution simple au probleme de shouldForwardProp introduite dans styled-components v5.1.
Un post-it sur un colis : le livreur le lit (pour le style) mais ne le colle pas sur la porte.
const Box = styled.div`
background: ${({ $bg }) => $bg};
padding: ${({ $size }) =>
$size === 'lg' ? '2rem' : '1rem'};
`
// $bg et $size ne sont PAS passes au DOM
<Box $bg="blue" $size="lg">Contenu</Box>Cas d'usage : Passer des props de styling sans polluer le DOM avec des attributs HTML invalides.
Autres stacks