應用程式供應器
應用程式供應器組件提供了必要的上下文，以便輕鬆設定 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 應用程式的預設和建議主題化選項，因為它是唯一可以防止諸如 dark-mode SSR flickering 等問題，並透過單一主題定義支援淺色和深色模式的選項。Toolpad 中提供的預設主題已採用此格式。僅當您將
@toolpad/core與@mui/material的 5.x 版本一起使用時，才支援 CSS 變數主題。 - 標準 Material UI 主題：可以提供單一標準 Material UI 主題作為唯一要使用的主題。
- 淺色和深色主題：可以為淺色和深色模式提供兩個單獨的 Material UI 主題，格式為
{ light: Theme, dark: Theme }的物件。