Simplify styled-components example (#5631)

- use `enhanceApp` so that styled-components used in _app.js are server rendered - call parent getInitialProps, fixes #5629 - return `styles`, making the render() method obsolete. cc @mxstbr @probablyup
vercel · Nov 8, 2018 · ed2c379 · ed2c379 · ek · Dec 12, 2018
1 parent a0137d4
commit ed2c379
Showing 1 changed file with 9 additions and 18 deletions.
diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
@@ -1,25 +1,16 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
-  static getInitialProps ({ renderPage }) {
+  static async getInitialProps (ctx) {
     const sheet = new ServerStyleSheet()
-    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
-    const styleTags = sheet.getStyleElement()
-    return { ...page, styleTags }
-  }
 
-  render () {
-    return (
-      <html>
-        <Head>
-          {this.props.styleTags}
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </html>
-    )
+    const originalRenderPage = ctx.renderPage
+    ctx.renderPage = () => originalRenderPage({
+      enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+    })
+
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps, styles: [...initialProps.styles, ...sheet.getStyleElement()] }
   }
 }