Material-UI v5与Next.js 14主题集成报错，涉及Joy UI冲突

一、修复TypeError: Cannot read properties of undefined (reading 'plain')报错 #

这个错误确实是同时使用Material-UI（MUI Core）和Joy UI导致的——Joy UI组件会尝试读取自身主题中的plain变体配置，但当前仅存在MUI Core的ThemeProvider，无法找到Joy的主题上下文，因此抛出错误。解决方法是同时引入两者的ThemeProvider并分别配置主题：

1. 导入Joy UI的主题相关依赖
   在app/layout.tsx中新增Joy UI的ThemeProvider和主题创建方法：

'use client'
// 新增Joy UI的导入
import { ThemeProvider as JoyThemeProvider, extendTheme } from '@mui/joy/styles';

// 创建Joy UI专属主题（可自定义配置）
const joyTheme = extendTheme();

2. 嵌套双ThemeProvider
   修改Layout的组件嵌套结构，确保Joy UI的ThemeProvider包裹住所有可能使用Joy组件的区域（这里直接全局包裹）：

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>
                    {/* 先包裹Joy的ThemeProvider，再包裹MUI Core的 */}
                    <JoyThemeProvider theme={joyTheme}>
                        <ThemeProvider theme={theme}>
                            <Provider store={store}>
                                <Suspense>
                                    <RequireAuth>
                                        {children}
                                    </RequireAuth>
                                </Suspense>
                            </Provider>
                        </ThemeProvider>
                    </JoyThemeProvider>
                </AppRouterCacheProvider>
            </body>
        </html>
    )
}

二、全局设置按钮border-radius: 20px #

根据你使用的按钮类型分别配置：

1. Material-UI Core按钮 #

修改app/theme.ts，在createTheme中添加组件样式覆盖：

const theme = createTheme({
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '20px',
        },
      },
    },
  },
});

2. Joy UI按钮 #

在app/layout.tsx的Joy主题配置中添加样式覆盖：

const joyTheme = extendTheme({
  components: {
    JoyButton: {
      styleOverrides: {
        root: {
          borderRadius: '20px',
        },
      },
    },
  },
});

如果两种按钮都使用，同时配置上述两处即可。

三、MUI v6升级失败的处理建议 #

MUI v6是重大版本迭代，存在大量API和依赖变更，直接升级容易出现环境崩溃：

• 先清理本地依赖缓存：执行yarn cache clean，删除node_modules和yarn.lock文件
• 确保所有MUI相关包（包括@mui/material、@mui/joy、@mui/material-nextjs等）版本统一为v6
• 分步升级：先升级核心包，再逐步替换过时API，避免一次性全量升级

内容的提问来源于stack exchange，提问作者JustANoob