Fix default theme

examples/crm/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Admin, Resource, ListGuesser } from 'react-admin';
+import { Admin, Resource, ListGuesser, defaultTheme } from 'react-admin';
 import { dataProvider } from './dataProvider';
 import { authProvider } from './authProvider';
 import Layout from './Layout';
@@ -15,6 +15,7 @@ const App = () => (
         layout={Layout}
         dashboard={Dashboard}
         theme={{
+            ...defaultTheme,
             palette: {
                 background: {
                     default: '#fafafb',

examples/demo/src/layout/themes.ts

@@ -1,11 +1,6 @@
-import { ThemeOptions } from '@mui/material';
+import { defaultTheme } from 'react-admin';
 
-type RaTheme = {
-    sidebar: { width: number };
-    components: { RaMenuItemLink: { styleOverrides: any } };
-};
-
-export const darkTheme: ThemeOptions & RaTheme = {
+export const darkTheme = {
     palette: {
         primary: {
             main: '#90caf9',
@@ -19,6 +14,7 @@ export const darkTheme: ThemeOptions & RaTheme = {
         width: 200,
     },
     components: {
+        ...defaultTheme.components,
         RaMenuItemLink: {
             styleOverrides: {
                 root: {
@@ -37,43 +33,10 @@ export const darkTheme: ThemeOptions & RaTheme = {
                 },
             },
         },
-        MuiButtonBase: {
-            defaultProps: {
-                // disable ripple for perf reasons
-                disableRipple: true,
-            },
-            styleOverrides: {
-                root: {
-                    '&:hover:active::after': {
-                        // recreate a static ripple color
-                        // use the currentColor to make it work both for outlined and contained buttons
-                        // but to dim the background without dimming the text,
-                        // put another element on top with a limited opacity
-                        content: '""',
-                        display: 'block',
-                        width: '100%',
-                        height: '100%',
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        backgroundColor: 'currentColor',
-                        opacity: 0.3,
-                        borderRadius: 'inherit',
-                    },
-                },
-            },
-        },
-        MuiTextField: {
-            defaultProps: {
-                variant: 'filled',
-                margin: 'dense',
-                size: 'small',
-            },
-        },
     },
 };
 
-export const lightTheme: ThemeOptions & RaTheme = {
+export const lightTheme = {
     palette: {
         primary: {
             main: '#4f3cc9',
@@ -96,6 +59,7 @@ export const lightTheme: ThemeOptions & RaTheme = {
         width: 200,
     },
     components: {
+        ...defaultTheme.components,
         RaMenuItemLink: {
             styleOverrides: {
                 root: {
@@ -117,32 +81,6 @@ export const lightTheme: ThemeOptions & RaTheme = {
                 },
             },
         },
-        MuiButtonBase: {
-            defaultProps: {
-                // disable ripple for perf reasons
-                disableRipple: true,
-            },
-            styleOverrides: {
-                root: {
-                    '&:hover:active::after': {
-                        // recreate a static ripple color
-                        // use the currentColor to make it work both for outlined and contained buttons
-                        // but to dim the background without dimming the text,
-                        // put another element on top with a limited opacity
-                        content: '""',
-                        display: 'block',
-                        width: '100%',
-                        height: '100%',
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        backgroundColor: 'currentColor',
-                        opacity: 0.3,
-                        borderRadius: 'inherit',
-                    },
-                },
-            },
-        },
         MuiAppBar: {
             styleOverrides: {
                 colorSecondary: {
@@ -161,29 +99,5 @@ export const lightTheme: ThemeOptions & RaTheme = {
                 },
             },
         },
-        MuiFilledInput: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                    '&$disabled': {
-                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                    },
-                },
-            },
-        },
-        MuiSnackbarContent: {
-            styleOverrides: {
-                root: {
-                    border: 'none',
-                },
-            },
-        },
-        MuiTextField: {
-            defaultProps: {
-                variant: 'filled',
-                margin: 'dense',
-                size: 'small',
-            },
-        },
     },
 };

packages/ra-ui-materialui/src/defaultTheme.ts

@@ -77,9 +77,16 @@ export const defaultTheme = {
         },
         MuiTextField: {
             defaultProps: {
-                variant: 'filled',
-                margin: 'dense',
-                size: 'small',
+                variant: 'filled' as const,
+                margin: 'dense' as const,
+                size: 'small' as const,
+            },
+        },
+        MuiFormControl: {
+            defaultProps: {
+                variant: 'filled' as const,
+                margin: 'dense' as const,
+                size: 'small' as const,
             },
         },
     },