import React, { Component } from 'react'
import Helmet from 'react-helmet'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function HTML (props) {
  const head = Helmet.rewind()

  const sheet = new ServerStyleSheet()
  const main = sheet.collectStyles(
    <div id='react-mount' dangerouslySetInnerHTML={{ __html: props.body }} />
  )
  const css = sheet.getStyleElement()

  return (
    <html lang='en'>
      <head>
        <meta charSet='utf-8' />
        { props.headComponents }
        { head.title.toComponent() }
        { head.meta.toComponent() }
        { head.link.toComponent() }
        <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <link rel='icon' href='/favicon.ico' type='image/x-icon' />
        <link rel='apple-touch-icon' sizes='600x600' href='/icon.png' type='image/x-icon' />
        { process.env.NODE_ENV === 'production' && css }
      </head>
      <body>
        { main }
        { props.postBodyComponents }
      </body>
    </html>
  )
}

import React, { Component } from 'react'
import Helmet from 'react-helmet'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function HTML (props) {
  const head = Helmet.rewind()
  const sheet = new ServerStyleSheet()
  const css = sheet.getStyleElement()

  return (
    <StyleSheetManager sheet={sheet.instance}>
      <html lang='en'>
        <head>
          <meta charSet='utf-8' />
          { props.headComponents }
          { head.title.toComponent() }
          { head.meta.toComponent() }
          { head.link.toComponent() }
          <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
          <meta name='viewport' content='width=device-width, initial-scale=1.0' />
          <link rel='icon' href='/favicon.ico' type='image/x-icon' />
          <link rel='apple-touch-icon' sizes='600x600' href='/icon.png' type='image/x-icon' />
          { process.env.NODE_ENV === 'production' && css }
        </head>
        <body>
          <div id='react-mount' dangerouslySetInnerHTML={{ __html: props.body }} />
          { props.postBodyComponents }
        </body>
      </html>
    </StyleSheetManager>
  )
}

--- 
+++ 
@@ -4,29 +4,31 @@
 
 export default function HTML (props) {
   const head = Helmet.rewind()
+
   const sheet = new ServerStyleSheet()
+  const main = sheet.collectStyles(
+    <div id='react-mount' dangerouslySetInnerHTML={{ __html: props.body }} />
+  )
   const css = sheet.getStyleElement()
 
   return (
-    <StyleSheetManager sheet={sheet.instance}>
-      <html lang='en'>
-        <head>
-          <meta charSet='utf-8' />
-          { props.headComponents }
-          { head.title.toComponent() }
-          { head.meta.toComponent() }
-          { head.link.toComponent() }
-          <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
-          <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-          <link rel='icon' href='/favicon.ico' type='image/x-icon' />
-          <link rel='apple-touch-icon' sizes='600x600' href='/icon.png' type='image/x-icon' />
-          { process.env.NODE_ENV === 'production' && css }
-        </head>
-        <body>
-          <div id='react-mount' dangerouslySetInnerHTML={{ __html: props.body }} />
-          { props.postBodyComponents }
-        </body>
-      </html>
-    </StyleSheetManager>
+    <html lang='en'>
+      <head>
+        <meta charSet='utf-8' />
+        { props.headComponents }
+        { head.title.toComponent() }
+        { head.meta.toComponent() }
+        { head.link.toComponent() }
+        <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <link rel='icon' href='/favicon.ico' type='image/x-icon' />
+        <link rel='apple-touch-icon' sizes='600x600' href='/icon.png' type='image/x-icon' />
+        { process.env.NODE_ENV === 'production' && css }
+      </head>
+      <body>
+        { main }
+        { props.postBodyComponents }
+      </body>
+    </html>
   )
 }
Use collectStyles function for server-side rendering of styles
