ThemeProvider

Définition

Composant context React qui injecte un objet theme accessible dans tous les styled components enfants via la prop theme ou le hook useTheme.

Analogie

Le thermostat central d'un bâtiment : tu règles la température une fois, toutes les pièces en bénéficient.

Exemple de code

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.

Termes liés