ThemeProvider

Definition

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 batiment : tu regles la temperature une fois, toutes les pieces en beneficient.

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 lies