'MUI createTheme in nextjs

I used material-UI version 4 for my project. I recently changed it to version 5.5.0. But createTheme does not work properly. None of the colors and settings used in the palette apply.

next: 11.0.0 react:17.0.2 mui : 5.5.0

theme.js

import { createTheme, responsiveFontSizes } from "@mui/material/styles";
import { deepPurple, amber } from "@mui/material/colors";
import palette from './palette';
import typography from './typography';

let theme = createTheme({
 palette,
 typography,
 zIndex: {
   appBar: 1200,
   drawer: 1100
 }
});

// const Theme = responsiveFontSizes(theme);

export default theme;

As you can see below I used ThemeProvider in _app.js, I put the document file in the github similar to the UI material example. Do I need to do anything else?

https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_document.js

_app.js

import React from "react";
import PropTypes from 'prop-types';
import Head from 'next/head';
import dynamic from 'next/dynamic';
import { ThemeProvider } from '@mui/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import createEmotionCache from '../theme/createEmotionCache';
import theme from "../theme"
import { wrapper } from '../_redux/store';

import MenuTop from '../_components/Sessions/menu_top';
import Footer from '../_components/Sessions/footer';
import MenuIndex from '../_components/Sessions/menu_index';
import Header from '../_components/Sessions/header';
import Snackbar from '../_components/Sessions/Snackbar';


import "../styles/404.css";
import "../styles/index.css";


// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
   
      </Head>
      <ThemeProvider theme={theme}>
          <Snackbar {...pageProps.alert} />
          <MenuTop/>
          <Header/>
          <MenuIndex/>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <div style={{ userSelect: "none" }}>
                  {/* <StylesProvider jss={jss}> */}
                    <Component {...pageProps} />
                  {/* </StylesProvider> */}
                <Footer/>
            </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};


  export default wrapper.withRedux(MyApp);

Solution 1:^[1]

You can try to remove the zIndex in the createTheme so the theme should be work.

let theme = createTheme({
 palette,
 typography
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	wildgamer

'MUI createTheme in nextjs

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]