@material-ui + Styled-components SSR Rendering

https://freecode.academy/tasks/cklwi6a3pcwc407304j2l0tao

package.json

@@ -72,6 +72,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-images-uploader": "^1.1.0",
+    "react-jss": "8.6.1",
     "react-motion": "^0.4.4",
     "react-static-google-map": "^0.5.2",
     "recompose": "^0.19.0",
@@ -110,6 +111,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-jss": "^8.6.4",
     "@types/react-motion": "^0.0.29",
     "@types/recompose": "^0.30.7",
     "@types/styled-components": "^5.1.4",

src/pages/_App/index.tsx

@@ -59,6 +59,11 @@ const App: MainApp<AppProps> = ({ Component, pageProps }) => {
     if (jssStyles) {
       jssStyles.parentElement?.removeChild(jssStyles)
     }
+
+    // const jssStyles2 = document.querySelector('#server-side-jss')
+    // if (jssStyles2) {
+    //   jssStyles2.parentElement?.removeChild(jssStyles2)
+    // }
   }, [])
 
   // const {

src/pages/_Document/index.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { ServerStyleSheets } from '@material-ui/core/styles'
+import {
+  ServerStyleSheets,
+  // createGenerateClassName,
+} from '@material-ui/core/styles'
 import theme from 'src/theme/muiTheme'
 // import createEmotionServer from '@emotion/server/create-instance';
 // import theme from '../src/theme';
 // import { cache } from './_app';
+import { ServerStyleSheet } from 'styled-components'
+
+// import { JssProvider, SheetsRegistry } from 'react-jss'
 
 // const { extractCritical } = createEmotionServer(cache);
 
@@ -55,24 +61,55 @@ MyDocument.getInitialProps = async (ctx) => {
   // 3. app.render
   // 4. page.render
 
+  const sheet = new ServerStyleSheet()
+  // const sheetsRegistry = new SheetsRegistry()
+  // const generateClassName = createGenerateClassName()
+
   // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets()
+  const MUIsheets = new ServerStyleSheets()
   const originalRenderPage = ctx.renderPage
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: (App) => (props) => {
+        return (
+          <>
+            {MUIsheets.collect(
+              <>
+                {sheet.collectStyles(
+                  // <JssProvider
+                  //   registry={sheetsRegistry}
+                  //   generateClassName={generateClassName}
+                  // >
+                  <App {...props} />
+                  // </JssProvider>
+                )}
+              </>
+            )}
+          </>
+        )
+      },
     })
 
   const initialProps = await Document.getInitialProps(ctx)
   // const styles = extractCritical(initialProps.html);
 
+  // const css = sheetsRegistry.toString()
+
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
     styles: [
       ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
+      MUIsheets.getStyleElement(),
+      sheet.getStyleElement(),
+      // <style
+      //   key="styles"
+      //   id="server-side-jss"
+      //   dangerouslySetInnerHTML={{
+      //     __html: css,
+      //   }}
+      // />,
       // <style
       //   key="emotion-style-tag"
       //   data-emotion={`css ${styles.ids.join(' ')}`}

yarn.lock

@@ -3161,6 +3161,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/jss@*":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-10.0.0.tgz#bea379e2b64d0f0f0f9e9093471036643608c676"
+  integrity sha512-Obo9w999hf2Q4sU/MRT7iR1UazdvFK3pEdtB6BSfO0NbmDrVMQi+RgNts4DLmlFho5Uf1PG4cMKLT8POhb6utA==
+  dependencies:
+    jss "*"
+
 "@types/jss@^9.3.0":
   version "9.5.8"
   resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.8.tgz#258391f42211c042fc965508d505cbdc579baa5b"
@@ -3344,6 +3351,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-jss@^8.6.4":
+  version "8.6.4"
+  resolved "https://registry.yarnpkg.com/@types/react-jss/-/react-jss-8.6.4.tgz#4f1e170f14c59f583c901a1479e96f2db3d52ea6"
+  integrity sha512-LK55kG7YnEt0xmBZeZqCEHEkSx7Xm1WD0GxaOUxIeTQyrSE6h0K70cyrXCloivrZwDzXqcA78zBBB64gapASPQ==
+  dependencies:
+    "@types/jss" "*"
+    "@types/react" "*"
+    "@types/theming" "*"
+    csstype "^2.0.0"
+
 "@types/react-motion@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/react-motion/-/react-motion-0.0.29.tgz#1a22e11bc1452150e8aa58463f72dd921ff10721"
@@ -3465,6 +3482,13 @@
   dependencies:
     "@types/react-test-renderer" "*"
 
+"@types/theming@*":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/theming/-/theming-2.0.0.tgz#f2798b4b697abda80bc1798937d777ea60806bc5"
+  integrity sha512-HElAmEfMUCYMZXcx6jN0MiJayax8Gxz0A+ztHJOmBD26hKhDpxZ/4PAsUGmDGAE4zqBk+Qea7QHP8Q8048eC8A==
+  dependencies:
+    theming "*"
+
 "@types/uglify-js@*":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.12.0.tgz#2bb061c269441620d46b946350c8f16d52ef37c5"
@@ -10922,7 +10946,7 @@ jss-vendor-prefixer@^7.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@10.5.1, jss@^10.5.1:
+jss@*, jss@10.5.1, jss@^10.5.1:
   version "10.5.1"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.5.1.tgz#93e6b2428c840408372d8b548c3f3c60fa601c40"
   integrity sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==
@@ -13613,6 +13637,11 @@ react-dev-utils@^10.0.0:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-display-name@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6"
+  integrity sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==
+
 react-docgen-typescript-plugin@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-0.6.3.tgz#664b22601df083597ecb1e60bd21beca60125fdf"
@@ -13772,7 +13801,7 @@ react-is@16.13.1, react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-jss@^8.1.0:
+react-jss@8.6.1, react-jss@^8.1.0:
   version "8.6.1"
   resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
   integrity sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==
@@ -15779,6 +15808,16 @@ text-table@0.2.0, text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+theming@*:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-3.3.0.tgz#dacabf04aa689edde35f1e1c117ec6de73fbf870"
+  integrity sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.8"
+    react-display-name "^0.2.4"
+    tiny-warning "^1.0.2"
+
 theming@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"