Ensure Material UI v5 compatibility

docs/data/toolpad/core/components/app-provider/app-provider.md

@@ -80,7 +80,7 @@ export default function App(props) {
 
 An `AppProvider` can set a visual theme for all elements inside it to adopt via the `theme` prop. This prop can be set in a few distinct ways with different advantages and disadvantages:
 
-1. [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651) and supports both light and dark mode with a single theme definition. The provided default theme in Toolpad is already in this format.
+1. [CSS variables theme](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/): the default and recommended theming option for Toolpad applications, as it is the only option that prevents issues such as [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651) and supports both light and dark mode with a single theme definition. The provided default theme in Toolpad is already in this format. **CSS variables themes are only supported when you use `@toolpad/core` with version 5.x of `@mui/material`.**
 2. [Standard Material UI theme](https://mui.com/material-ui/customization/theming/): a single standard Material UI theme can be provided as the only theme to be used.
 3. **Light and dark themes**: two separate Material UI themes can be provided for light and dark mode in an object with the format `{ light: Theme, dark: Theme }`
 

packages/create-toolpad-app/src/generateProject.ts

@@ -1,7 +1,8 @@
 import path from 'path';
 import { PackageJson } from './packageType';
 
-interface GenerateProjectOptions {
+export interface GenerateProjectOptions {
+  version?: string;
   name: string;
 }
 
@@ -118,33 +119,16 @@ export default function NavigateButton() {
 
   const themeContent = `
   "use client";
-  import { extendTheme } from '@mui/material/styles';
-  import type {} from '@mui/material/themeCssVarsAugmentation';
+  import { createTheme } from '@mui/material/styles';
 
-  const theme = extendTheme({
-    colorSchemes: {
-      light: {
-        palette: {
-          background: {
-            default: 'var(--mui-palette-grey-50)',
-            defaultChannel: 'var(--mui-palette-grey-50)',
-          },
-        },
-      },
-      dark: {
-        palette: {
-          background: {
-            default: 'var(--mui-palette-grey-900)',
-            defaultChannel: 'var(--mui-palette-grey-900)',
-          },
-          text: {
-            primary: 'var(--mui-palette-grey-200)',
-            primaryChannel: 'var(--mui-palette-grey-200)',
-          },
-        },
-      },
-    },
-  });
+  const lightTheme = createTheme();
+
+  const darkTheme = createTheme({ palette: { mode: 'dark' } });
+
+  const theme = {
+    light: lightTheme,
+    dark: darkTheme
+  };
 
   export default theme;
   `;
@@ -208,10 +192,10 @@ export default function NavigateButton() {
       react: '^18',
       'react-dom': '^18',
       next: '^14',
-      '@toolpad/core': 'latest',
-      '@mui/material': 'next',
-      '@mui/material-nextjs': 'next',
-      '@mui/icons-material': 'next',
+      '@toolpad/core': options.version ?? 'latest',
+      '@mui/material': '^5',
+      '@mui/material-nextjs': '^5',
+      '@mui/icons-material': '^5',
       '@emotion/react': '^11',
       '@emotion/styled': '^11',
       '@emotion/cache': '^11',

packages/create-toolpad-app/src/index.ts

@@ -17,6 +17,16 @@ import generateProject from './generateProject';
 import writeFiles from './writeFiles';
 import { downloadAndExtractExample } from './examples';
 
+/**
+ * Find package.json of the create-toolpad-app package
+ */
+async function findCtaPackageJson() {
+  const ctaPackageJsonPath = path.resolve(__dirname, '../package.json');
+  const content = await fs.readFile(ctaPackageJsonPath, 'utf8');
+  const packageJson = JSON.parse(content);
+  return packageJson;
+}
+
 type PackageManager = 'npm' | 'pnpm' | 'yarn';
 declare global {
   interface Error {
@@ -170,7 +180,8 @@ const scaffoldCoreProject = async (absolutePath: string): Promise<void> => {
   );
   // eslint-disable-next-line no-console
   console.log();
-  const files = generateProject({ name: path.basename(absolutePath) });
+  const pkg = await findCtaPackageJson();
+  const files = generateProject({ name: path.basename(absolutePath), version: pkg.version });
   await writeFiles(absolutePath, files);
 
   // eslint-disable-next-line no-console

packages/toolpad-core/package.json

@@ -75,8 +75,8 @@
     "vitest": "2.0.5"
   },
   "peerDependencies": {
-    "@mui/icons-material": "*",
-    "@mui/material": "*",
+    "@mui/icons-material": "5 - 6",
+    "@mui/material": "5 - 6",
     "next": "^14",
     "react": "^18"
   },