Material-UI 主题停止工作 升级@material-ui/core & @material-ui/styles (REACT & Next.js)

Question

我刚刚升级了包@material-ui/core*(4.4.1 => 4.8.3)* & @material/styles*(4.4.1 = 4.8.2)*

现在所有使用主题的地方都没有应用正确的颜色和边距。

主题包中是否有任何我不知道的重大更改？

我正在使用 Next.js 进行服务器渲染。重要说明：在升级软件包之前一切正常。降级不是一种选择，因为我需要访问较新版本中发布的组件之一。因此，我也不想将自己锁定在较低版本上。

编辑： 代码清晰

_app.js

<Provider store={store}>
  <PersistGate persistor={store.__PERSISTOR} loading={null}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} user={this.state.user} />
    </ThemeProvider>
  </PersistGate>
</Provider>

_document.js

 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.Fragment key="styles">
        {initialProps.styles}
        {sheets.getStyleElement()}
      </React.Fragment>
    ]
  };

这一切都与示例中提供的非常相似 Material-UI。而且我没有看到他们的 git repo 对 nextjs 实现有任何变化。

Answer 1

我不确定这是否会对您的特定问题有所帮助，但我可以分享一些我在使用 Material UI 软件包时遇到的一些坑，这些坑会导致您的行为解释了。

• 确保您的项目依赖项仅包含每个 @material-ui 包的一个版本。 styles 如果项目中存在多个样式版本，则应用效果不佳。
• 确保您使用的所有 @material-ui 包都更新到最新版本。如果您错过升级，它们可能不会很好地协同工作。
• 尝试与 <ThemeProvider>一起使用 @material-ui/core/styles 中的 <MuiThemeProvider>（或将其替换为）。我前段时间在使用版本 4 时遇到了这个问题。如果我没记错的话，那是因为我的项目同时使用了 class 和功能组件。

Answer 2

我正在使用 Nextjs v9.3 和配置 material-ui，如下所示

_app.js

import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";

import { theme } from "../lib/theme";

function MyApp(props) {
  useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles && jssStyles.parentNode)
      jssStyles.parentNode.removeChild(jssStyles);
  }, []);
  const { Component, pageProps } = props;
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

_document.js

import React from "react";
import NextDocument from "next/document";
import { ServerStyleSheets as MaterialUiServerStyleSheets } from "@material-ui/core/styles";
import flush from "styled-jsx/server";

export default class Document extends NextDocument {
  static async getInitialProps(ctx) {
    const materialUiSheets = new MaterialUiServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props =>
            materialUiSheets.collect(<App {...props} />)
        });

      const initialProps = await NextDocument.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: [
          <React.Fragment key="styles">
            {initialProps.styles}
            {materialUiSheets.getStyleElement()}
          </React.Fragment>
        ]
      };
    } finally {
      flush();
    }
  }
}