createGlobalStyle

Définition

Fonction qui crée un composant injectant du CSS global (reset, fonts, variables). Contrairement a styled, ces styles ne sont pas scopes a un élément.

Analogie

Le papier peint de l'appartement : il couvre tous les murs, pas juste un meuble.

Exemple de code

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 App

Cas d'usage

Définir le CSS reset, les styles globaux du body et les custom properties CSS.

Termes liés