Material UI and Next.js setup

Question

It seems like the "way to go" for setting up Next.js and MUI is to remove the server-side styling, so I did it in _app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);
  return <Component {...pageProps} />;
}

export default MyApp;

also did it in _document.tsx

import { ServerStyleSheets } from '@mui/styles';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import React from 'react';

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang='en'>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () => {
    return originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });
  };
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

But it's still not working, Material UI change with makeStyles doesn't take effect. The jssStyles variable is always null as well, so that's probably the problem, but I can't find a solution.

Youzef · Accepted Answer · 2022-06-07 18:44:16Z

6

The best way to go about this would be to clone the example repo from mui github then start from there. If not then just go over their _app.tsx and _document.tsx and make sure you have all the dependencies installed. Notice they also use the @emotion package.

Javascript repo link here and Typescript repo here

edited Jun 7, 2022 at 18:44

answered Jan 5, 2022 at 13:37

Youzef

8582 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI and Next.js setup

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related