Component-based API for global styling

Via https://github.com/styled-components/styled-components/issues/730#issuecomment-320035959

It would be great to have a React component for global styles that does the actual injecting (rendering null), removing the CSS when it is unmounted.

So instead of

    injectGlobal`...`

you’d do

const GlobalStyle = styled.global`
… (including prop interpolation)
`
...
return (
  <App>
    <GlobalStyle darkBg={this.props.dark} />
    ...
  </App>
)

The only differences with regular styled components would be:

• Renders null
• Does not wrap the CSS with an own class

This way:

• Global styles can be easily modified via props
• It works without issues in SSR
• It’s obvious what is happening

[Ky6uk]

@imbhargav5 after latest v3 update it just forces me with severity “error” to use createGlobalStyle, but I am not sure it’s possible to do in v3.

I want to say some kind of deprecations should provide a way to switch on the new feature and to remove that deprecation warning. But currently the deprecation warning doesn’t provide any alternatives to do that without upgrading to v4.

[probablyup]

Yeah… I think I’m just going to take it out. After more thought it doesn’t make sense to put in a non-actionable warning.