web-dev-qa-db-fra.com

styled-components - comment définir des styles sur html ou balise body?

Normalement, lorsque j'utilise du CSS pur, j'ai une feuille de style qui contient:

html {
    height: 100%;
}

body {
    font-size: 14px;
}

Lors de l'utilisation de styled-components dans mon projet React, comment définir des styles pour les balises html ou body? Est-ce que je gère un fichier CSS distinct uniquement à cette fin?

styled-components
23
JoeTidee

Vous pouvez bien sûr conserver un fichier CSS distinct que vous incluez dans votre HTML via un <link> tag.

Pour v4:

Utilisez createGlobalStyle de Styled-components.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

Pré v4:

Styled-components exporte également une aide injectGlobal pour injecter le CSS global à partir de JavaScript:

import { injectGlobal } from 'styled-components';

injectGlobal`
  html {
    height: 100%;
    width: 100%;
  }
`

Voir documentation API pour plus d'informations!

46
mxstbr

En date d'octobre 2018.

[~ # ~] note [~ # ~]

L'API injectGlobal a été supprimée et remplacée par createGlobalStyle dans les composants de style v4.

Selon les documents createGlobalStyle est

Une fonction d'assistance pour générer un StyledComponent spécial qui gère les styles globaux. Normalement, les composants stylisés sont automatiquement étendus à une classe CSS locale et donc isolés des autres composants. Dans le cas de createGlobalStyle, cette limitation est supprimée et des éléments tels que les réinitialisations CSS ou les feuilles de style de base peuvent être appliqués.

Exemple 

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <Navigation /> {/* example of other top-level stuff */}
  <GlobalStyle whiteColor />
</React.Fragment>

En savoir plus sur documents officiels .

17
Madan Bhandari