fix: mui/material-ui#26561 (comment)

jy95 · Nov 28, 2024 · 972bc96 · 972bc96
1 parent 6ce77ec
commit 972bc96
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,10 +16,12 @@
     "generate-api-json-files": "node generateJsonFiles.mjs"
   },
   "dependencies": {
+    "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@mui/icons-material": "^6.1.9",
     "@mui/material": "^6.1.9",
+    "@mui/material-nextjs": "^6.1.9",
     "@mui/x-charts": "^8.0.0-alpha.1",
     "@mui/x-data-grid": "^8.0.0-alpha.1",
     "@reduxjs/toolkit": "^2.3.0",

diff --git a/src/components/dashboard/DashboardAppProvider.tsx b/src/components/dashboard/DashboardAppProvider.tsx
@@ -1,5 +1,6 @@
 // Providers
 import { AppProvider } from '@toolpad/core/nextjs';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 
 // Hooks
 import {useTranslations} from 'next-intl';
@@ -59,13 +60,15 @@ export default function DashboardAppProvider({
     ];
 
     return (
-        <AppProvider 
-            navigation={NAVIGATION}
-            branding={{
-                title: "GamesPassionFR"
-            }}
-        >
-            {children}
-        </AppProvider>
-    )
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+            <AppProvider 
+                navigation={NAVIGATION}
+                branding={{
+                    title: "GamesPassionFR"
+                }}
+            >
+                {children}
+            </AppProvider>
+        </AppRouterCacheProvider>
+    );
 }