Injecting styles in body without global

Version

2.0.0-13

I have a situation where I am applying styling to a page.

Can I directly inject css styles to the body in this page without applying them through injectGlobal?

Something like the following:

const Cover = styled(CoverUnstyled)`
  body {
    height: 100%
  }
`;

[thysultan]

@chhuang Making use of the inverted & pattern you could do.

body:not(&) { overflow: hidden; }

Which can essentially be used as an inline global styling escape hatch 😃

[wmertens]

@geelen @mxstbr I think there is a good case here for having a react component that does the actual injecting (rendering null), removing the CSS when it is unmounted.

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