如何将Nextjs +样式化组件与material-ui集成

material-ui React.js

番长猴子

2020-03-20

1. 要使用样式化的组件构建next.js应用程序，确实非常容易。您只需要使用其_document.js片段即可启用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.令人遗憾的是，我无法弄清楚如何“合并”这两种实现并获得下一个应用程序，其中样式化组件和Material-ui组件可以共存，SSR，并且在页面加载时不会闪烁。

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

提前致谢。

第2528篇《如何将Nextjs +样式化组件与material-ui集成》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
小小 2020.03.20

这是我的_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 }]
   ]
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android