[universal-redux] How to apply global styles?

[0xsven]

Awesome boilerplate!

Until today I was using the master branch to work on components. Like in your examples I was using injectGlobal from styled-components to add webfonts, root font size and some base styles for html and body elements.

Today I decided to try the server side rendering branch. I realised that injectGlobal runs on page load. That causes a small glitch in the UI because the browser first displays the page without said styles and then injects them only after first render.

Using a styles.css solves that issue. I was wondering if you have a better solution to that?

[diegohaz]

Thank you for the feedback, @0xsven.

There's an open issue on styled-components repo for that: styled-components/styled-components#124 (comment). While this isn't solved, the styles.css is the way to go.

[diegohaz]

@0xsven It was my fault. I put it inside componentDidMount, which doesn't run on server. If you put injectGlobal on componentWillMount it works.