在 MUI 中哪里为 Next.js 导入自定义主题？

Question

我需要使用 MUI 自定义 React\Naxt.js 项目中的颜色。我遇到过 createTheme()，该项目也是在 Typescript 中。我是否使用以下内容创建一个单独的文件，以及在 Next.js 中的何处导入它（layout.ts、page.ts），以便每个组件都呈现样式。

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

Answer 1

Next.js 允许在

layout.tsx

文件中配置您的库。根据您使用的库，可以为 next.js 应用程序中的每个布局创建单独的配置。

例如：

app/
|_layout.tsx <- a root configuration of the library
|_blog/
  |_layout.tsx <- a personalized configuration of the library for the Blog module

对于 MUI，您需要导入主题配置，并使用

ThemeProvider

填充它。

您的

app/layout.tsx

文件应如下所示：

 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';

 export default function RootLayout(props) {
   const { children } = props;
   return (
     <html lang="en">
       <body>
          <AppRouterCacheProvider>
+           <ThemeProvider theme={theme}>
              {children}
+           </ThemeProvider>
          </AppRouterCacheProvider>
       </body>
     </html>
   );
 }

有关更多详细信息，请参阅 MUI 的文档和有关 Next.js 集成的文章 https://mui.com/material-ui/integrations/nextjs/.

在 MUI 中哪里为 Next.js 导入自定义主题？

问题描述投票：0回答：1

1个回答

最新问题

在 MUI 中哪里为 Next.js 导入自定义主题？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1