Use Nextjs integration for Mui

2024-05-17 08:42:30 +04:00
parent cfa4ff6b0d
commit 03ce161f65
4 changed files with 37 additions and 1 deletions
@@ -1,12 +1,21 @@
+import {AppRouterCacheProvider} from '@mui/material-nextjs/v13-appRouter'
+import {ThemeProvider} from '@mui/material/styles'
 import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import theme from '../src/theme.js'

 export default function RootLayout({children}) { // eslint-disable-line react/prop-types
  return (
    <html lang='fr'>
-      <body>{children}</body>
+      <body>
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={theme}>
+            {children}
+          </ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
    </html>
  )
 }
@@ -7,11 +7,13 @@
  },
  "dependencies": {
    "@directus/sdk": "^16.0.0",
+    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.13",
    "@mui/icons-material": "^5.15.18",
    "@mui/material": "^5.15.18",
+    "@mui/material-nextjs": "^5.15.11",
    "next": "^14.2.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
@@ -0,0 +1,18 @@
+'use client'
+
+import {Roboto} from 'next/font/google'
+import {createTheme} from '@mui/material/styles'
+
+const roboto = Roboto({ // eslint-disable-line new-cap
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+const theme = createTheme({
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+})
+
+export default theme
@@ -307,6 +307,13 @@
  dependencies:
    "@babel/runtime" "^7.23.9"

+"@mui/material-nextjs@^5.15.11":
+  version "5.15.11"
+  resolved "https://registry.yarnpkg.com/@mui/material-nextjs/-/material-nextjs-5.15.11.tgz#bf75eece88fb088e74eb5f0eef01f9f64f8ec7f4"
+  integrity sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
 "@mui/material@^5.15.18":
  version "5.15.18"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.18.tgz#1184e88cebb5c58625ca799531c0611c1fd9a2a8"