Next.js 13（App Router）中如何配置MUI日期选择器的Provider？

Next.js 13 App Router架构下，根布局文件（app/layout.js 或 app/layout.tsx）承担了原Pages Router中_app.js/_app.tsx的全局组件包裹职责，你只需要在这个根布局里添加MUI日期组件所需的LocalizationProvider即可。

具体步骤： #

1. 打开app目录下的根布局文件（layout.js或layout.tsx）
2. 导入LocalizationProvider和AdapterDayjs
3. 用LocalizationProvider包裹布局内的所有子内容

示例代码如下：

// app/layout.js
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          {children}
        </LocalizationProvider>
      </body>
    </html>
  );
}

额外注意： #

• 确保已安装dayjs依赖，因为AdapterDayjs需要它提供日期处理支持：

  npm install dayjs
  # 或使用yarn
  yarn add dayjs
  

• 只需在根布局中添加一次LocalizationProvider，所有嵌套路由的组件都会自动继承该上下文，无需重复包裹。

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