From 8b29f48094bffe030b5c912badf70639a6225dd6 Mon Sep 17 00:00:00 2001
From: "E. Almqvist"
Date: Sat, 9 Jul 2022 02:13:24 +0200
Subject: [PATCH] Add server side stylesheet for styled components
---
pages/_document.tsx | 43 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 pages/_document.tsx
diff --git a/pages/_document.tsx b/pages/_document.tsx
new file mode 100644
index 0000000..2559f34
--- /dev/null
+++ b/pages/_document.tsx
@@ -0,0 +1,43 @@
+import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
+import React from "react";
+import { ServerStyleSheet } from "styled-components";
+
+
+export default class MyDocument extends Document {
+ static async getInitialProps(ctx: DocumentContext) {
+ const sheet = new ServerStyleSheet();
+ const originalRenderPage = ctx.renderPage;
+
+ try {
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: App => props => sheet.collectStyles(),
+ });
+
+ const initialProps = await Document.getInitialProps(ctx);
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+ {sheet.getStyleElement()}
+
+ ),
+ };
+ } finally {
+ sheet.seal();
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}