个人中心
gpt4 book ai didi

reactjs - Material UI 在生产中破坏 NextJS 应用程序

转载 作者：行者123 更新时间：2023-12-04 11:32:48 29 4
gpt4 key购买 nike

我创建了一个 NextJS 应用程序，它使用服务器端渲染和 Material UI。它在开发中运行良好。
当我运行“下一个构建”时，应用程序编译和构建没有错误。当我使用 NODE_ENV=production 运行它时，网页呈现得很好，但许多功能不再起作用。例如:

  • Material UI 的“隐藏”组件从不显示任何嵌套在其中的子组件，即使它应该显示(在我的开发应用程序中，它根据屏幕大小隐藏和显示某些 div)。
  • 网页上的按钮都不起作用。所有这些按钮都有“onClick”事件，其回调函数在点击时以某种方式修改 React 状态对象。但是，单击这些按钮时没有任何 react 。状态保持不变，所以我假设当这些点击事件发生时这些函数永远不会被调用。这适用于 Material UI 的 Button 组件以及普通的旧 HTML 按钮(如 JSX)。

    • 当我在笔记本电脑上以开发模式运行它时，一切正常。但是，当我构建 NextJS 应用程序并以生产模式将其部署到服务器时，我遇到了上面列出的问题。到目前为止，我的研究只发现了在构建过程中类名冲突的可能性(这是在 Material UI 的常见问题页面上说的)。有没有人遇到过和我一样的问题？
    编辑:我刚刚启动了一个准系统 NextJS 应用程序，它只包含一个索引页和最少的依赖项，一个状态参数和一个通过 onClick 事件修改参数的按钮。我有同样的问题。该按钮在开发中有效，但在生产中无效。所以这将是 NextJS 问题而不是 Material UI 问题。但这仍然不能解释为什么无论屏幕大小如何，Material UI 的“隐藏”组件始终保持隐藏状态。也许这既是 Next JS 又是 Material UI 的问题。

    最佳答案

    我认为这可以帮助你。
    在 _document.js 中

    import React from 'react';
    import Document, {
      Html, Main, NextScript,
    } from 'next/document';
    import { ServerStyleSheets } from '@material-ui/core/styles';

    export default class MyDocument extends Document {
      render() {
        return (
          <Html lang="en">
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        );
      }
    }

    // `getInitialProps` belongs to `_document` (instead of `_app`),
    // it's compatible with server-side generation (SSG).
    MyDocument.getInitialProps = async (ctx) => {

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

      ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheets.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), sheets.getStyleElement()],
      };
    };
    并在 _app.js 中添加 

    React.useEffect(() => {
      // Remove the server-side injected CSS.
      const jssStyles = document.querySelector('#jss-server-side');
      if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles);
      }
    }, []);
    希望它起作用!

    关于reactjs - Material UI 在生产中破坏 NextJS 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63324512/

    29 4 0
    文章推荐： typeorm - 我如何将 TypeORM 与 Better-sqlite3 一起使用
    文章推荐： visual-studio-2008 - Visual Studio 2008 的 XML 架构设计器
    文章推荐： .htaccess - Cakephp 密码保护与 htaccess 和 htpasswd - 如何？
    文章推荐： java - Firebase crashlytics 仪表板不断加载
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com