extract global style/theme logic to GlobalStyles

nicholeuf · Feb 13, 2024 · 5d73564 · 5d73564
1 parent fdac8fb
commit 5d73564
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/src/app/GlobalStyles.tsx b/src/app/GlobalStyles.tsx
@@ -0,0 +1,23 @@
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+import theme from '@/app/styles/theme';
+
+interface GlobalStylesProps {
+  children: React.ReactNode;
+}
+
+const GlobalStyles: React.FC<GlobalStylesProps> = ({ children }) => {
+  return (
+    <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}
+
+export default GlobalStyles;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,10 @@
 
 import { Metadata } from "next";
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 
-import theme from '@/app/styles/theme';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import MainContainer from '@/components/MainContainer';
+import GlobalStyles from "./GlobalStyles";
 
 export const metadata: Metadata = {
   title: {
@@ -40,15 +37,11 @@ const RootLayout: React.FC<RootLayoutProps> = ({ children }) => {
   return (
     <html lang='en'>
       <body>
-        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
-          <ThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <Header />
-            <MainContainer>{children}</MainContainer>
-            <Footer />
-          </ThemeProvider>
-        </AppRouterCacheProvider>
+        <GlobalStyles>
+          <Header />
+          <MainContainer>{children}</MainContainer>
+          <Footer />
+        </GlobalStyles>
       </body>
     </html>
   );