terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Simplify styled-components example (#5631)

Browse source 
- 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
This commit is contained in:
Tim Neutkens 2018-11-08 12:43:16 +01:00 committed by GitHub
parent a0137d4fd8
commit ed2c379fc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/with-styled-components/pages/_document.js
View file

@ -1,25 +1,16 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components' import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) { static async getInitialProps (ctx) {
const sheet = new ServerStyleSheet() const sheet = new ServerStyleSheet()
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
const styleTags = sheet.getStyleElement()
return { ...page, styleTags }
}
render () { const originalRenderPage = ctx.renderPage
return ( ctx.renderPage = () => originalRenderPage({
<html> enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
<Head> })
{this.props.styleTags}
</Head> const initialProps = await Document.getInitialProps(ctx)
<body> return { ...initialProps, styles: [...initialProps.styles, ...sheet.getStyleElement()] }
<Main />
<NextScript />
</body>
</html>
)
} }
} }