reactjs - Material-UI v5 and Next.js 14 integration not working with theming

I tried to follow / but I get an error crashing the whole application: TypeError: Cannot read properties of undefined (reading 'plain')

I am also using Typescript. My files look as follows:

my-project/app/theme.ts -> copied the source

'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;

my-project/app/layout.tsx

"use client"
import { Amplify } from "aws-amplify"
import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito"
import { sessionStorage } from "aws-amplify/utils"
import { Suspense } from "react"
import { Provider } from "react-redux"
import { store } from "@data/index"
import amplifyConfig from "@utils/amplifyConfig"
import RequireAuth from "@components/RequireAuth/RequireAuth"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import theme from "./theme"
import { ThemeProvider } from "@mui/material/styles";

Amplify.configure(amplifyConfig)
cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage)

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <title>My shitty app</title>
            </head>
            <body style={{ margin: 0, padding: 0 }}>
                <AppRouterCacheProvider>
                    <ThemeProvider theme={theme}>
                        <Provider store={store}>
                            <Suspense>
                                <RequireAuth>
                                    {children}
                                </RequireAuth>
                            </Suspense>
                        </Provider>
                    </ThemeProvider>
                </AppRouterCacheProvider>
            </body>
        </html>
    )
}

What am I doing wrong? Also I tried upgrading to MUI v6 and it wrecked my entire local dev environment to the point where yarn dev wouldn't start so I had to git clone again the whole thing... My immediate goal was just to style all the buttons to have border-radius: "20px"

[EDIT]: actually the errors come from @mui/joy which is also used in the project. I guess more work needs to be done to integrate theming with both MUI and Joy. Fair to say this caused me anything but Joy...

I tried to follow https://v5.mui/material-ui/integrations/nextjs/ but I get an error crashing the whole application: TypeError: Cannot read properties of undefined (reading 'plain')

I am also using Typescript. My files look as follows:

my-project/app/theme.ts -> copied the source

'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;

my-project/app/layout.tsx

"use client"
import { Amplify } from "aws-amplify"
import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito"
import { sessionStorage } from "aws-amplify/utils"
import { Suspense } from "react"
import { Provider } from "react-redux"
import { store } from "@data/index"
import amplifyConfig from "@utils/amplifyConfig"
import RequireAuth from "@components/RequireAuth/RequireAuth"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import theme from "./theme"
import { ThemeProvider } from "@mui/material/styles";

Amplify.configure(amplifyConfig)
cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage)

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <title>My shitty app</title>
            </head>
            <body style={{ margin: 0, padding: 0 }}>
                <AppRouterCacheProvider>
                    <ThemeProvider theme={theme}>
                        <Provider store={store}>
                            <Suspense>
                                <RequireAuth>
                                    {children}
                                </RequireAuth>
                            </Suspense>
                        </Provider>
                    </ThemeProvider>
                </AppRouterCacheProvider>
            </body>
        </html>
    )
}

Share Improve this question edited Nov 20, 2024 at 22:04 asked Nov 20, 2024 at 21:32 JustANoob 1771 gold badge2 silver badges11 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Fixed the issue by following these links:

https://mui/joy-ui/integrations/material-ui/
https://mui/material-ui/customization/css-theme-variables/usage/

"use client"
import { Amplify } from "aws-amplify"
import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito"
import { sessionStorage } from "aws-amplify/utils"
import { Suspense } from "react"
import { Provider } from "react-redux"
import { store } from "@data/index"
import amplifyConfig from "@utils/amplifyConfig"
import RequireAuth from "@components/RequireAuth/RequireAuth"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import theme from "./theme"
import {
    extendTheme as materialExtendTheme,
    ThemeProvider as MaterialThemeProvider,
    THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { ThemeProvider as JoyThemeProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';

Amplify.configure(amplifyConfig)
cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage)

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <title>My Shitty App</title>
            </head>
            <body style={{ margin: 0, padding: 0 }}>
                <AppRouterCacheProvider>
                    <MaterialThemeProvider theme={{ [MATERIAL_THEME_ID]: theme }}>
                        <JoyThemeProvider>
                            <CssBaseline enableColorScheme />
                            <Provider store={store}>
                                <Suspense>
                                    <RequireAuth>
                                        {children}
                                    </RequireAuth>
                                </Suspense>
                            </Provider>
                        </JoyThemeProvider>
                    </MaterialThemeProvider>
                </AppRouterCacheProvider>
            </body>
        </html>
    )
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

reactjs - Material-UI v5 and Next.js 14 integration not working with theming - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)