Render styled-jsx in _document example (#1287)

vercel · Feb 27, 2017 · e1babdf · aesopwolf · Mar 17, 2017 · e1babdf
1 parent 1971517
commit e1babdf
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/examples/with-cxs/pages/_document.js b/examples/with-cxs/pages/_document.js
@@ -4,7 +4,7 @@ import cxs from 'cxs'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const page = renderPage()
-    let style = cxs.getCss()
+    const style = cxs.getCss()
     return { ...page, style }
   }
 

diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
@@ -4,16 +4,15 @@ import styleSheet from 'styled-components/lib/models/StyleSheet'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const page = renderPage()
-    const style = styleSheet.rules().map(rule => rule.cssText).join('\n')
-    return { ...page, style }
+    const styles = styleSheet.rules().map(rule => rule.cssText).join('\n')
+    return { ...page, styles }
   }
 
   render () {
     return (
       <html>
         <Head>
           <title>My page</title>
-          <style dangerouslySetInnerHTML={{ __html: this.props.style }} />
         </Head>
         <body>
           <Main />

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