/* eslint-disable react/jsx-props-no-spreading */ // #region Global Imports import * as React from 'react'; import Document, { Html, Head, Main, NextScript, DocumentContext, } from 'next/document'; import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'; import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles'; // #endregion Global Imports class WebAppDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const styledComponentSheet = new StyledComponentSheets(); const materialUiSheets = new MaterialUiServerStyleSheets(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => styledComponentSheet.collectStyles( materialUiSheets.collect(<App {...props} />) ), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {materialUiSheets.getStyleElement()} {styledComponentSheet.getStyleElement()} </> ), }; } finally { styledComponentSheet.seal(); } } render(): JSX.Element { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } export default WebAppDocument;