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>一起使用<MuiThemeProvider> 来自@material-ui/core/styles（或替换为）。前段时间我在使用版本 4 时遇到了这个问题。如果我没记错的话，那是因为我的项目同时使用了类和函数式组件。

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();
    }
  }
}