Question 74426 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How can i Use Material Ui Theme Provider and Redux toolkit in Next Js? – Reactjs

Actually my problem is that I want to add a light mode dark mode feature for my next js application using redux toolkit.

In _app.js if adding like this

<ThemeProvider theme={theme}>
  <CssBaseline />
  <Provider store={store}>
    <Component {...pageProps} />
  </Provider>
</ThemeProvider>;

It’s showing an error called:

Error:

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

If I put only provider application is working but I need theme provider also, How can I Use Redux toolkit with material ui theme provider in next js

[Error] Code

I want to add a light mode dark mode feature for my next js application using redux toolkit and material ui theme provider how can i wrap both in _app.js.

Tags:

2

Answers


  1. 0

    Something similar happened to me since I am also using "nextJs 13-MUI-Redux tolkit", this is how I solved it.
    I am working with the app folder so I have a page.tsx, layout.tsx and template.tsx, here is layout and template:

    'use client'
import { Inter } from 'next/font/google'
import { store } from './state/store'
import { Provider } from 'react-redux'

const inter = Inter({
  weight: ['400', '600', '700'],
  subsets: ['latin']
})

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider store={store}>
          {children}
        </Provider>
      </body>
    </html>
  )
}

    and the template component:

    'use client'
import { useAppSelector } from './state/hooks'
import { CssBaseline, ThemeProvider } from '@mui/material'
import { createTheme } from '@mui/material';
import { useMemo } from 'react'
import { themeSettings } from './theme/theme'

export default function Template({ children }: {
  children: React.ReactNode
}) {

  const mode = useAppSelector((state) => state.theme.mode);
  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}
    Login or Signup to reply.
  2. 0

    You will need to create HOC first and then use it to wrap around Nextjs Component.

    import { ThemeProvider } from "@mui/material/styles";
import { useSelector } from "react-redux";

const ThemeHOC = ({ children }) => {
    const theme = useSelector((state) => state.theme);
    return <ThemeProvider theme={{ ...theme }}>
              <CssBaseline />
              {children}
           </ThemeProvider>;
};

    and then you can use above HOC as following

    <>
  <Provider store={store}>Ï
  <ThemeHOC>
    <Component {...pageProps} /> 
  </ThemeHOC>
  </Provider>
<>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search