如何将 Nextjs + styled-components 与 material-ui 集成答案

【问题标题】：How to integrate Nextjs + styled-components with material-ui如何将 Nextjs + styled-components 与 material-ui 集成
【发布时间】：2019-08-02 05:14:03
【问题描述】：

1. 使用样式化组件构建 next.js 应用程序非常简单。您只需要使用他们的_document.js sn-p 来启用 SSR 并防止样式在页面加载时闪烁：https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

2. 使用 material-ui 构建 next.js 应用程序几乎一样简单。您只需从项目基础开始：https://github.com/mui-org/material-ui/tree/master/examples/nextjs，它在_document.js 上有自己的实现：https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

3. 遗憾的是，我不知道如何“合并”这两个实现并获得下一个应用程序，其中样式组件和材料 UI 组件可以共存，SSR 并且不闪烁在页面加载。

你能帮帮我吗？互联网上是否有人比我的能力更好，已经解决了这个问题但我不知道？

提前致谢。

【问题讨论】：

在这里，您可以找到一个工作示例github.com/manakuro/nextjs-styled-component-material-ui-example 并发布关于它的帖子javascript.plainenglish.io/…。这是一种常见的方法，我也使用它。
这里你也可以找到一个很好的例子：link

标签： material-ui styled-components next.js

【解决方案1】：

试试这个

_document.js

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/styles';
import theme from '../src/theme';

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const styledComponentsSheet = new ServerStyleSheet()
    const materialSheets = new ServerStyleSheets()
    const originalRenderPage = ctx.renderPage;

    try {
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: App => props => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />))
          })
        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: (
            <React.Fragment>
              {initialProps.styles}
              {materialSheets.getStyleElement()}
              {styledComponentsSheet.getStyleElement()}
            </React.Fragment>
          )
        }
      } finally {
        styledComponentsSheet.seal()
      }
  }

  render() {
    return (
      <html lang="en" dir="ltr">
        <Head>
          <meta charSet="utf-8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          {/* PWA primary color */}
          <meta
            name="theme-color"
            content={theme.palette.primary.main}
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

更新检查https://github.com/nblthree/nextjs-with-material-ui-and-styled-components

【讨论】：

@alevardi 我在测试后更新了我的答案。现在它毫无疑问地起作用了。
@alevardi 这是我创建的一个 github 存储库github.com/MarchWorks/nextjs-with-material-ui-styled-components
非常感谢，你太棒了。奇迹般有效！ :)
@Alevardi 如果有任何过时的内容，请打开一个问题，我会查看它并感谢您的报告
实际上，我错了，也许当@MehmetN.Yarar 发现这个线程时它已经过时了，现在购买我刚刚克隆了你的仓库以查看发生了什么并且一切正常。非常感谢您的这项工作！

【解决方案2】：

我遵循了这些示例方法并为我工作得很好：

https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-styled-components-typescript

【讨论】：

您的示例有效。但与此同时，静态构建存在问题link

【解决方案3】：

对于仍然遇到上述代码问题的每个人：我还必须在 pages/_app.tsx 中包含 StylesProvider。

_app.tsx：

import { StylesProvider } from '@material-ui/core/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Now, you can override Material-UI's styles. */}
</StylesProvider>

_document.tsx：

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <meta name="theme-color" content="#000000" />
          {/* Fonts and icons */}
          <link
            rel="stylesheet"
            type="text/css"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
          />
          <link
            href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
            rel="stylesheet"
          />
        </Head>
        <body>
          <div id="page-transition" />
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {

  // Render app and page and get the context of the page with collected side effects.
  const materialSheet = new ServerStyleSheets();
  const styledComponentSheet = new ServerStyleSheet();
  const originalRenderPage = ctx.renderPage;

  try {
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          styledComponentSheet.collectStyles(
            materialSheet.collect(<App {...props} />),
          ),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [
        ...React.Children.toArray(initialProps.styles),
        materialSheet.getStyleElement(),
        styledComponentSheet.getStyleElement(),
      ],
    };
  } finally {
    styledComponentSheet.seal();
  }
};

export default MyDocument;

【讨论】：

这对我有用，感觉很干净，谢谢

【解决方案4】：

这是我的_document.js 文件的样子：

    import Document from "next/document";
    import { ServerStyleSheet } from "styled-components";

    export default class MyDocument extends Document {
      static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;

      try {
        ctx.renderPage = () =>
          originalRenderPage({
            enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
          });
        const initialProps = await Document.getInitialProps(ctx);

        return {
          ...initialProps,
          styles: (
            <>
              {initialProps.styles}
              {sheet.getStyleElement()}
            </>
          )
        };
      } finally {
        sheet.seal();
      }
    }
  }

在下面找到我的.babelrc 文件：

{ 
  "presets": ["next/babel"], 
  "plugins": [
      ["styled-components", { "ssr": true }]
   ]
}

【讨论】：

【解决方案5】：

此解决方案适用于服务器端，对于客户端，您还需要更改注入顺序，如下所述：https://material-ui.com/customization/css-in-js/#css-injection-order

要使用 next.js，您需要像这样更改 jss 常量的分配：

const jss = create({
  ...jssPreset(),
  insertionPoint: process.browser
    ? window.document.getElementById('jss-insertion-point')
    : null
})

【讨论】：