From ed2c379fc734812d2c70bd28e8e50a6ed3c2ead1 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 8 Nov 2018 12:43:16 +0100 Subject: [PATCH] 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 --- .../with-styled-components/pages/_document.js | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js index 06262c50..77f69990 100644 --- 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()) - const styleTags = sheet.getStyleElement() - return { ...page, styleTags } - } - render () { - return ( - - - {this.props.styleTags} - - -
- - - - ) + const originalRenderPage = ctx.renderPage + ctx.renderPage = () => originalRenderPage({ + enhanceApp: App => props => sheet.collectStyles() + }) + + const initialProps = await Document.getInitialProps(ctx) + return { ...initialProps, styles: [...initialProps.styles, ...sheet.getStyleElement()] } } }