Перестала работать тема 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 репо для следующей js реализации.

Answer 1

Я не уверен, что это поможет вашей конкретной проблеме, но я могу поделиться некоторыми ямами, в которые я попал при работе с пакетом Material UI почти два года, и все они вызывают поведение, которое вы объяснили.

• Убедитесь, что зависимости вашего проекта включают только одну версию каждого из @material-ui пакетов. styles неприменимо, если в проекте присутствует более одной версии стилей.
• Убедитесь, что все используемые вами пакеты @material-ui обновлены до последней версии. Они могут плохо себя вести вместе, если вы пропустите обновление.
• Попробуйте вместе с <ThemeProvider> использовать <MuiThemeProvider> из @material-ui/core/styles (или заменить его на). Я столкнулся с этой проблемой некоторое время go, находясь в версии 4. Если я правильно помню, это произошло потому, что в моем проекте использовались как классовые, так и функциональные компоненты.

Answer 2

Я использую Next js v9.3 и config материал-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;

_документ. 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();
    }
  }
}