styled-components - how to set styles on html or body tag?

Question

Ordinarily, when using pure CSS, I have a style sheet that contains:

html {
    height: 100%;
}

body {
    font-size: 14px;
}

When using styled-components in my React project, how do I set styles for the html or body tags? Do I maintain a separate CSS file just for this purpose?

Answer 1

You can, of course, maintain a separate CSS file that you include in your HTML via a <link> tag.

For v4:

Use createGlobalStyle from 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>

Pre v4:

Styled-components also exports an injectGlobal helper to inject global CSS from JavaScript:

import { injectGlobal } from 'styled-components';

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

See the API documentation for more information!