diff --git a/striker-ui/pages/_document.tsx b/striker-ui/pages/_document.tsx
index a67d887a..e731955e 100644
--- a/striker-ui/pages/_document.tsx
+++ b/striker-ui/pages/_document.tsx
@@ -1,49 +1,37 @@
-import { Children } from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/core/styles';
+import Document, { DocumentInitialProps, DocumentContext } from 'next/document';
+import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles';
+// import { ServerStyleSheet as StyledComponentSheets } from 'styled-components';
-export default class MyDocument extends Document {
- render(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
- );
- }
-}
+class MyDocument extends Document {
+ static async getInitialProps(
+ ctx: DocumentContext,
+ ): Promise {
+ const materialUiSheets = new MaterialUiServerStyleSheets();
+ const originalRenderPage = ctx.renderPage;
-// `getInitialProps` belongs to `_document` (instead of `_app`),
-// it's compatible with server-side generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
- // Render app and page and get the context of the page with collected side effects.
- const sheets = new ServerStyleSheets();
- const originalRenderPage = ctx.renderPage;
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: (App) => (props) =>
+ materialUiSheets.collect(
+ ,
+ ),
+ });
- ctx.renderPage = () =>
- originalRenderPage({
- enhanceApp: (App) => (props) =>
- sheets.collect(
- ,
- ),
- });
+ const initialProps = await Document.getInitialProps(ctx);
- const initialProps = await Document.getInitialProps(ctx);
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+ {materialUiSheets.getStyleElement()}
+
+ ),
+ };
+ }
+}
- return {
- ...initialProps,
- // Styles fragment is rendered after the app and page rendering finish.
- styles: [
- ...Children.toArray(initialProps.styles),
- sheets.getStyleElement(),
- ],
- };
-};
+export default MyDocument;