CODEWITHSUNDEEP
reactjsthemesmaterial-uinext.js
Stefan Januschke
Stefan Januschke

Reputation: 312

Material-UI Theme stopped working Upgrading @material-ui/core & @material-ui/styles (REACT & Next.js)

I have just upgraded the packages @material-ui/core*(4.4.1 => 4.8.3)* & @material/styles*(4.4.1 = 4.8.2)*

Now everything where the theme is used does not apply the correct colors & margins.

Are there any breaking changes in the package for the theme which I am not aware off ?

I am using Next.js for server rendering. Important note: Before upgrading the package everything worked fine. Downgrading is not an option as I need access to one of the components released in the newer version. Also I would not like to lock myself on a lower version because of that.

EDIT: Code for clarity

_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>
    ]
  };

This is all kept very much like in the example provided be Material-UI. And I did not see any changes in their git repo for the nextjs implementation.

Upvotes: 1

Views: 2320

Answers (2)

hmd.fullstack
hmd.fullstack

Reputation: 568

I am using Nextjs v9.3 and config material-ui like as follows

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

Upvotes: 1

Rena
Rena

Reputation: 301

I am not sure this will help your particular issue but I can share some pits I have fallen into while working with Material UI package for almost two years that all cause the behavior you have explained.

  • Make sure your project dependencies include only one version of each of @material-ui packages. styles wont apply well if there is more than one styles version present in the project.
  • Make sure all @material-ui packages you use are updated to latest version. They might not behave well together, if you miss an upgrade.
  • Try along with <ThemeProvider>using <MuiThemeProvider> from @material-ui/core/styles (or replace it with). I bumped into this issue some time ago while being on version 4. If I recall correctly it was because my project used both class and functional components.

Upvotes: 7

Related Questions