static async getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); // see https://github.com/nfl/react-helmet#server-usage for more information // 'head' was occupied by 'renderPage().head', we cannot use it return { ...page, styleTags, helmet: Helmet.rewind() }; }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />), }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), } } finally { sheet.seal() } }
render () { const sheet = new ServerStyleSheet() const main = sheet.collectStyles(<Main />) const styleTags = sheet.getStyleElement() return ( <html> <Head> <meta charSet='utf-8' /> <meta name='viewport' content='initial-scale=1.0, width=device-width' /> <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css' /> <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.7.4/tachyons.min.css' /> {styleTags} </Head> <body> <div className='root'> {main} </div> <NextScript /> </body> </html> ) }
static getInitialProps({ renderPage, req }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); const fontsAreLoaded = (req.headers.cookie || "").indexOf("fonts-loaded") !== 0; return { ...page, styleTags, fontsAreLoaded }; }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />) }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: [...initialProps.styles, ...sheet.getStyleElement()] }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps ({ renderPage }) { const sheet = new ServerStyleSheet() const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)) const styleTags = sheet.getStyleElement() return { ...page, styleTags } }
static getInitialProps ({ renderPage }) { const sheet = new ServerStyleSheet() const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)) const styleTags = sheet.getStyleElement() return { ...page, styleTags } }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; // return styles collected }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />) }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } }