Mui 主题方向与 next.js 14

Question

我目前有一个这样的主题提供者：

const Provider = ({ children }: { children: React.ReactNode }) => {
    return (
        <AppRouterCacheProvider>
            <Rtl>
                <ThemeProvider theme={theme}>{children}</ThemeProvider>
            </Rtl>
        </AppRouterCacheProvider>
    )
}

这是我的 Rtl 组件配置：

const cacheRtl = createCache({
    key: 'muirtl',
    stylisPlugins: [prefixer, rtlPlugin],
})

function Rtl(props: { children: React.ReactNode }) {
    return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>
}

当我用 rtl 组件包装我的应用程序时，我收到此错误：

TypeError: Cannot read properties of undefined (reading 'push')

Answer 1

您的问题是您有两个 CacheProvider，因为

AppRouterCacheProvider

是

CacheProvider

的包装器。
所以你应该做的就是配置

AppRouterCacheProvider

:

'use client'

import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
import rtlPlugin from 'stylis-plugin-rtl'

export default function AppRtl({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <AppRouterCacheProvider
      options={{
        key: 'muirtl',
        stylisPlugins: [rtlPlugin],
      }}>
      {children}
    </AppRouterCacheProvider>
  )
}

在 app/layout.tsx 中：

        <AppRtl>
          <ThemeProvider theme={theme}>
            {children}
          </ThemeProvider>
        </AppRtl>