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

Render styled-jsx in _document example (#1287)

Browse source
This commit is contained in:
Tim Neutkens 2017-02-28 00:45:49 +01:00 committed by Arunoda Susiripala
parent 1971517c17
commit e1babdfe9d
3 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-cxs/pages/_document.js
View file

@ -4,7 +4,7 @@ import cxs from 'cxs'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps ({ renderPage }) { static async getInitialProps ({ renderPage }) {
const page = renderPage() const page = renderPage()
let style = cxs.getCss() const style = cxs.getCss()
return { ...page, style } return { ...page, style }
} }

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

@ -4,8 +4,8 @@ import styleSheet from 'styled-components/lib/models/StyleSheet'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps ({ renderPage }) { static async getInitialProps ({ renderPage }) {
const page = renderPage() const page = renderPage()
const style = styleSheet.rules().map(rule => rule.cssText).join('\n') const styles = styleSheet.rules().map(rule => rule.cssText).join('\n')
return { ...page, style } return { ...page, styles }
} }
render () { render () {
@ -13,7 +13,6 @@ export default class MyDocument extends Document {
<html> <html>
<Head> <Head>
<title>My page</title> <title>My page</title>
<style dangerouslySetInnerHTML={{ __html: this.props.style }} />
</Head> </Head>
<body> <body>
<Main /> <Main />

8
readme.md
View file

@ -473,11 +473,13 @@ Pages in `Next.js` skip the definition of the surrounding document's markup. For
```jsx ```jsx
// ./pages/_document.js // ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps (ctx) { static getInitialProps ({ renderPage }) {
const props = await Document.getInitialProps(ctx) const {html, head} = renderPage()
return { ...props, customValue: 'hi there!' } const styles = flush()
return { html, head, styles }
} }
render () { render () {