[WIP] Fix Warning: Prop className did not match

babel.config.js

@@ -35,6 +35,7 @@ const defaultAlias = {
 };
 
 const productionPlugins = [
+  ['styled-components', { ssr: true, displayName: true, preprocess: false }],
   '@babel/plugin-transform-react-constant-elements',
   'babel-plugin-transform-dev-warning',
   ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
@@ -49,6 +50,7 @@ const productionPlugins = [
 module.exports = {
   presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
   plugins: [
+    ['styled-components', { ssr: true, displayName: true, preprocess: false }],
     [
       'babel-plugin-macros',
       {
@@ -85,6 +87,7 @@ module.exports = {
     },
     development: {
       plugins: [
+        ['styled-components', { ssr: true, displayName: true, preprocess: false }],
         [
           'babel-plugin-module-resolver',
           {
@@ -110,6 +113,7 @@ module.exports = {
     test: {
       sourceMaps: 'both',
       plugins: [
+        ['styled-components', { ssr: true, displayName: true, preprocess: false }],
         [
           'babel-plugin-module-resolver',
           {

docs/babel.config.js

@@ -21,8 +21,8 @@ const alias = {
   '@material-ui/styles': '../packages/material-ui-styles/src',
   '@material-ui/styled-engine-sc': '../packages/material-ui-styled-engine-sc/src',
   // Swap the comments on the next two lines for using the styled-components as style engine
-  '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src',
-  // '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src',
+  // '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src',
+  '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src',
   '@material-ui/system': '../packages/material-ui-system/src',
   '@material-ui/utils': '../packages/material-ui-utils/src',
   docs: './',
@@ -40,6 +40,7 @@ module.exports = {
     ['next/babel', { 'transform-runtime': { corejs: 2, version: transformRuntimeVersion } }],
   ],
   plugins: [
+    ['styled-components', { ssr: true, displayName: true, preprocess: false }],
     [
       'babel-plugin-macros',
       {
@@ -65,11 +66,37 @@ module.exports = {
   env: {
     production: {
       plugins: [
+        ['styled-components', { ssr: true, displayName: true, preprocess: false }],
         '@babel/plugin-transform-react-constant-elements',
         'babel-plugin-transform-dev-warning',
         ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
         ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }],
       ],
     },
+    development: {
+      plugins: [
+        ['styled-components', { ssr: true, displayName: true, preprocess: false }],
+        [
+          'babel-plugin-macros',
+          {
+            muiError: {
+              errorCodesPath,
+            },
+          },
+        ],
+        'babel-plugin-optimize-clsx',
+        // for IE 11 support
+        '@babel/plugin-transform-object-assign',
+        'babel-plugin-preval',
+        [
+          'babel-plugin-module-resolver',
+          {
+            alias,
+            transformFunctions: ['require', 'require.context'],
+            resolvePath,
+          },
+        ],
+      ],
+    },
   },
 };

docs/package.json

@@ -60,6 +60,7 @@
     "babel-plugin-optimize-clsx": "^2.4.1",
     "babel-plugin-preval": "^2.0.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
+    "styled-components": "^1.11.1",
     "babel-plugin-transform-dev-warning": "^0.1.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-css": "^4.1.11",

docs/pages/_app.js

@@ -311,9 +311,7 @@ function AppWrapper(props) {
 
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles) {
-      jssStyles.parentElement.removeChild(jssStyles);
-    }
+    if (jssStyles && jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles);
   }, []);
 
   const activePage = findActivePage(pages, router.pathname);

docs/pages/_document.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ServerStyleSheets } from '@material-ui/styles';
-import { ServerStyleSheet } from 'styled-components';
+import { ServerStyleSheet as StyledComponentSheets } from 'styled-components';
+import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/core/styles';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -119,44 +119,32 @@ MyDocument.getInitialProps = async (ctx) => {
   // 4. page.render
 
   // Render app and page and get the context of the page with collected side effects.
-  const materialSheets = new ServerStyleSheets();
-  const styledComponentsSheet = new ServerStyleSheet();
+  const styledComponentSheet = new StyledComponentSheets();
+  const materialUiSheets = new MaterialUiServerStyleSheets();
   const originalRenderPage = ctx.renderPage;
-
   try {
     ctx.renderPage = () =>
       originalRenderPage({
         enhanceApp: (App) => (props) =>
-          styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
+          styledComponentSheet.collectStyles(materialUiSheets.collect(<App {...props} />)),
       });
 
     const initialProps = await Document.getInitialProps(ctx);
 
-    let css = materialSheets.toString();
-    // It might be undefined, e.g. after an error.
-    if (css && process.env.NODE_ENV === 'production') {
-      const result1 = await prefixer.process(css, { from: undefined });
-      css = result1.css;
-      css = cleanCSS.minify(css).styles;
-    }
-
     return {
       ...initialProps,
       canonical: pathnameToLanguage(ctx.req.url).canonical,
       userLanguage: ctx.query.userLanguage || 'en',
       // Styles fragment is rendered after the app and page rendering finish.
       styles: [
-        ...React.Children.toArray(initialProps.styles),
-        <style
-          id="jss-server-side"
-          key="jss-server-side"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: css }}
-        />,
-        styledComponentsSheet.getStyleElement(),
+        <React.Fragment key="styles">
+          {initialProps.styles}
+          {materialUiSheets.getStyleElement()}
+          {styledComponentSheet.getStyleElement()}
+        </React.Fragment>,
       ],
     };
   } finally {
-    styledComponentsSheet.seal();
+    styledComponentSheet.seal();
   }
 };

package.json

@@ -81,6 +81,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-optimize-clsx": "^2.3.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
+    "styled-components": "^1.11.1",
     "babel-plugin-tester": "^9.0.0",
     "babel-plugin-transform-dev-warning": "^0.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",

yarn.lock

@@ -4016,16 +4016,26 @@ babel-plugin-react-remove-properties@^0.3.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
   integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
 
-"babel-plugin-styled-components@>= 1":
+"styled-components@>= 1":
   version "1.10.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
   integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.10"
 
+styled-components@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
+  integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
 [email protected], babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -15430,7 +15440,7 @@ styled-components@^5.0.0:
     "@emotion/is-prop-valid" "^0.8.8"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
+    styled-components ">= 1"
     css-to-react-native "^3.0.0"
     hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"
@@ -16750,9 +16760,9 @@ [email protected], webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-s
     source-map "~0.6.1"
 
 [email protected], webpack@^4.28.2, webpack@^4.41.0, webpack@^4.43.0, webpack@^4.44.1:
-  version "4.44.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21"
-  integrity sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ==
+  version "4.44.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
+  integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
   dependencies:
     "@webassemblyjs/ast" "1.9.0"
     "@webassemblyjs/helper-module-context" "1.9.0"