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