应用提供程序
应用提供程序组件提供了必要的上下文，以便轻松设置 Toolpad 应用程序。
通过在根级别使用 AppProvider 组件包裹应用程序，Toolpad 的许多功能（如路由、导航和主题）可以自动最大程度地启用，从而抽象化复杂性，帮助您专注于重要的细节。
基本
使用 AppProvider 组件包裹应用程序页面。
理想情况下，AppProvider 应该包裹应用程序中的每个页面，因此在大多数项目中，它应该被导入并放置在定义所有页面的 共享布局 的文件中。
在以下示例中，包裹页面的 AppProvider 组件为其提供默认主题，而放置在其中的 DashboardLayout 则根据传递给 AppProvider 的 props 自动设置其导航和路由功能。
导航
有关如何定义 DashboardLayout 组件使用的 navigation 的更多详细信息，请参阅该组件的 导航 部分。
Next.js
NextAppProvider 包含一些开箱即用的 Next.js 集成。
通过使用特定的 NextAppProvider，您无需手动配置某些 Toolpad 功能与相应的 Next.js 功能（如路由）之间的集成，从而使集成变得自动且无缝。
import { NextAppProvider } from '@toolpad/core/nextjs';
Next.js App Router
当使用 Next.js App Router 时，导入和使用 NextAppProvider 最常见的文件是定义所有应用程序页面布局的顶层 layout.tsx 文件。
// app/layout.tsx
import { NextAppProvider } from '@toolpad/core/nextjs';
export default function Layout(props) {
const { children } = props;
return (
<html lang="en">
<body>
<NextAppProvider>{children}</NextAppProvider>
</body>
</html>
);
}
Next.js Pages Router
当使用 Next.js Pages Router 时，为了包裹应用程序中的每个页面，导入和使用 NextAppProvider 最常见的文件是 pages/_app.tsx 文件。
// pages/_app.tsx
import { NextAppProvider } from '@toolpad/core/nextjs';
export default function App(props) {
const { Component, pageProps } = props;
return (
<NextAppProvider>
<Component {...pageProps} />
</NextAppProvider>
);
}
客户端路由
ReactRouterAppProvider 为使用 react-router 的项目提供了开箱即用的路由。
当使用 Vite 等工具构建单页应用程序时，建议使用此特定的 ReactRouterAppProvider，因为您无需手动配置应用程序路由，从而使集成变得自动且无缝。
import { ReactRouterAppProvider } from '@toolpad/core/react-router';
主题
AppProvider 可以通过 theme prop 为其内部的所有元素设置视觉主题以供采用。此 prop 可以通过几种不同的方式设置，各有优缺点。
- CSS 变量主题：Toolpad 应用程序的默认和推荐主题选项，因为它是唯一可以防止诸如 暗黑模式 SSR 闪烁 等问题，并使用单个主题定义支持亮色和暗黑模式的选项。Toolpad 中提供的默认主题已采用此格式。仅当您将
@toolpad/core与@mui/material的 5.x 版本一起使用时，才支持 CSS 变量主题。 - 标准 Material UI 主题：可以提供单个标准 Material UI 主题作为唯一要使用的主题。
- 亮色和暗黑主题：可以为亮色和暗黑模式提供两个单独的 Material UI 主题，格式为
{ light: Theme, dark: Theme }。