Remove warnings in example

marmelab · May 12, 2021 · a9e28b7 · a9e28b7
1 parent c1f94cc
commit a9e28b7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/examples/no-code/src/main.tsx b/examples/no-code/src/main.tsx
@@ -1,10 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Root } from 'ra-no-code';
+import { defaultTheme } from 'react-admin';
+import {
+    unstable_createMuiStrictModeTheme,
+    createMuiTheme,
+} from '@material-ui/core/styles';
+
+// FIXME MUI bug https://github.com/mui-org/material-ui/issues/13394
+const theme =
+    process.env.NODE_ENV !== 'production'
+        ? unstable_createMuiStrictModeTheme(defaultTheme)
+        : createMuiTheme(defaultTheme);
 
 ReactDOM.render(
     <React.StrictMode>
-        <Root />
+        <Root theme={theme} />
     </React.StrictMode>,
     document.getElementById('root')
 );
diff --git a/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx b/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx
@@ -14,8 +14,12 @@ import {
     createMuiTheme,
     makeStyles,
     ThemeProvider,
+    unstable_createMuiStrictModeTheme,
 } from '@material-ui/core/styles';
-import { defaultTheme } from 'ra-ui-materialui';
+import {
+    defaultTheme as RaDefaultTheme,
+    RaThemeOptions,
+} from 'ra-ui-materialui';
 import FolderIcon from '@material-ui/icons/Folder';
 import { Application } from './types';
 import { NewApplicationForm } from './NewApplicationForm';
@@ -24,8 +28,19 @@ import {
     storeApplicationsInStorage,
 } from './applicationStorage';
 
-export const ApplicationsDashboard = ({ onApplicationSelected }) => (
-    <ThemeProvider theme={createMuiTheme(defaultTheme)}>
+const defaultTheme =
+    process.env.NODE_ENV !== 'production'
+        ? unstable_createMuiStrictModeTheme(RaDefaultTheme)
+        : createMuiTheme(RaDefaultTheme);
+
+export const ApplicationsDashboard = ({
+    onApplicationSelected,
+    theme = defaultTheme,
+}: {
+    onApplicationSelected: any;
+    theme: RaThemeOptions;
+}) => (
+    <ThemeProvider theme={createMuiTheme(theme)}>
         <Applications onApplicationSelected={onApplicationSelected} />
     </ThemeProvider>
 );

diff --git a/packages/ra-no-code/src/Root.tsx b/packages/ra-no-code/src/Root.tsx
@@ -1,10 +1,11 @@
+import { RaThemeOptions } from 'ra-ui-materialui';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
 import { Admin } from './Admin';
 import { ApplicationContext } from './ApplicationContext';
 import { ApplicationsDashboard } from './ApplicationsDashboard';
 
-export const Root = () => {
+export const Root = ({ theme }: { theme: RaThemeOptions }) => {
     const [application, setApplication] = useState();
 
     const handleExitApplication = () => {
@@ -26,14 +27,15 @@ export const Root = () => {
     if (context.application) {
         return (
             <ApplicationContext.Provider value={context}>
-                <Admin />
+                <Admin theme={theme} />
             </ApplicationContext.Provider>
         );
     }
 
     return (
         <ApplicationsDashboard
             onApplicationSelected={handleApplicationSelected}
+            theme={theme}
         />
     );
 };