Next.js 14配置MUI Theme Direction时遇TypeError问题求助

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'push')是因为重复嵌套了MUI的CacheProvider：Next.js 14专用的AppRouterCacheProvider已经内置了CacheProvider逻辑，额外套一层自定义的Rtl组件（内部也是CacheProvider）会导致缓存实例冲突，使MUI内部依赖的缓存对象失效。

解决方案 #

移除自定义的Rtl组件，直接将RTL缓存配置传入AppRouterCacheProvider，同时确保主题明确设置RTL方向。

修改后的完整代码 #

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { createCache, prefixer } from '@emotion/css';
import rtlPlugin from 'stylis-plugin-rtl';

// 创建带RTL插件的Emotion缓存
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

// 配置RTL主题
const rtlTheme = createTheme({
  direction: 'rtl', // 必须显式设置为rtl
  // 你的其他主题配置（调色板、排版等）
});

const Provider = ({ children }: { children: React.ReactNode }) => {
  return (
    <AppRouterCacheProvider cache={cacheRtl}>
      <ThemeProvider theme={rtlTheme}>{children}</ThemeProvider>
    </AppRouterCacheProvider>
  );
};

export default Provider;

关键注意事项 #

• 确保已安装依赖：运行npm install stylis-plugin-rtl @emotion/css @mui/material-nextjs
• 主题的direction必须设为'rtl'，否则RTL样式不会生效
• 不要再单独嵌套CacheProvider，AppRouterCacheProvider已经处理了App Router环境下的缓存需求

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