import * as React from 'react' ; import Document , { Head , Html , Main , NextScript } from 'next/document' ; import { Provider as StyletronProvider } from 'styletron-react' ; import { Server , Sheet } from 'styletron-engine-atomic' ; import { styletron } from '../styletron' ; class MyDocument extends Document < { stylesheets : Sheet [ ] ; } > { static getInitialProps ( props ) { const page = props . renderPage ( ( App ) => ( props ) => ( < StyletronProvider value = { styletron } > < App { ... props } / > < /StyletronProvider>)); const stylesheets = ( styletron as Server ) . getStylesheets ( ) || [ ] ; return { ... page , stylesheets } ; } render ( ) { return ( < Html > < Head > { this . props . stylesheets . map ( ( sheet , i ) => ( < style className = "_styletron_hydrate_" dangerouslySetInnerHTML = { { __html : sheet . css } } media = { sheet . attrs . media } data - hydrate = { sheet . attrs [ 'data-hydrate' ] } key = { i } / > ) ) } < /Head> < body > < Main /> < NextScript / > < /body> < /Html>); } } export default MyDocument ;