support mui v9

smeng9 · smeng9 · commit f7cd1f13ed9c · 2026-04-27T14:40:31.000+08:00
diff --git a/packages/ra-core/src/form/FilterLiveForm.tsx b/packages/ra-core/src/form/FilterLiveForm.tsx
@@ -24,7 +24,7 @@ import { useListContext } from '../controller/list/useListContext';
  * at other places to create your own filter UI.
  *
  * @example
- * import MailIcon from '@mui/icons-material/MailOutline';
+ * import MailIcon from '@mui/icons-material/MailOutlined';
  * import TitleIcon from '@mui/icons-material/Title';
  * import { Card, CardContent } from '@mui/material';
  * import * as React from 'react';
diff --git a/packages/ra-input-rich-text/package.json b/packages/ra-input-rich-text/package.json
@@ -34,8 +34,8 @@
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
-        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
         "ra-core": "^5.0.0",
         "ra-ui-materialui": "^5.0.0",
         "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/ra-no-code/package.json b/packages/ra-no-code/package.json
@@ -35,8 +35,8 @@
         "zshy": "^0.5.0"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
-        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0"
     },
diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json
@@ -54,10 +54,10 @@
         "zshy": "^0.5.0"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
-        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.20 || ^6.0.0 || ^7.0.0",
-        "@mui/utils": "^5.15.20 || ^6.0.0 || ^7.0.0",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
+        "@mui/system": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
+        "@mui/utils": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
         "@tanstack/react-query": "^5.83.0",
         "csstype": "^3.1.3",
         "ra-core": "^5.0.0",
diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/AddItemButton.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/AddItemButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import AddIcon from '@mui/icons-material/AddCircleOutline';
+import AddIcon from '@mui/icons-material/AddCircleOutlined';
 import clsx from 'clsx';
 import { useSimpleFormIterator } from 'ra-core';
 import { IconButtonWithTooltip, ButtonProps } from '../../button';
diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/RemoveItemButton.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/RemoveItemButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import CloseIcon from '@mui/icons-material/RemoveCircleOutline';
+import CloseIcon from '@mui/icons-material/RemoveCircleOutlined';
 import clsx from 'clsx';
 import { useSimpleFormIterator, useSimpleFormIteratorItem } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx
@@ -188,6 +188,11 @@ export const DateInput = (props: DateInputProps) => {
     const { ref, name } = field;
     const inputRef = useForkRef(ref, localInputRef);
 
+    const mergedSlotProps = {
+        ...rest.slotProps,
+        inputLabel: { ...defaultInputLabelProps, ...rest.slotProps?.inputLabel },
+    };
+
     return (
         <StyledTextField
             id={id}
@@ -226,6 +231,8 @@ export const DateInput = (props: DateInputProps) => {
             }
             InputLabelProps={defaultInputLabelProps}
             {...sanitizeInputRestProps(rest)}
+            // @ts-expect-error slotProps do not yet exist in MUI v5
+            slotProps={mergedSlotProps}
         />
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
@@ -147,6 +147,11 @@ export const DateTimeInput = (props: DateTimeInputProps) => {
     const { ref, name } = field;
     const inputRef = useForkRef(ref, localInputRef);
 
+    const mergedSlotProps = {
+        ...rest.slotProps,
+        inputLabel: { ...defaultInputLabelProps, ...rest.slotProps?.inputLabel },
+    };
+
     return (
         <StyledTextField
             id={id}
@@ -185,6 +190,8 @@ export const DateTimeInput = (props: DateTimeInputProps) => {
             }
             InputLabelProps={defaultInputLabelProps}
             {...sanitizeInputRestProps(rest)}
+            // @ts-expect-error slotProps do not yet exist in MUI v5
+            slotProps={mergedSlotProps}
         />
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/FileInput.stories.tsx b/packages/ra-ui-materialui/src/input/FileInput.stories.tsx
@@ -9,7 +9,7 @@ import { FileInput } from './FileInput';
 import { FileField } from '../field';
 import { required } from 'ra-core';
 import { FormInspector } from './common';
-import DeleteIcon from '@mui/icons-material/DeleteOutline';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
 
 export default { title: 'ra-ui-materialui/input/FileInput' };
 
diff --git a/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx b/packages/ra-ui-materialui/src/input/ImageInput.stories.tsx
@@ -9,7 +9,7 @@ import { ImageInput } from './ImageInput';
 import { ImageField } from '../field';
 import { required } from 'ra-core';
 import { FormInspector } from './common';
-import DeleteIcon from '@mui/icons-material/DeleteOutline';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
 
 export default { title: 'ra-ui-materialui/input/ImageInput' };
 
diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx
@@ -68,7 +68,11 @@ export const NumberInput = (props: NumberInputProps) => {
     });
     const { onBlur: onBlurFromField } = field;
 
-    const inputProps = { ...overrideInputProps, step, min, max };
+    const inputProps = { ...overrideInputProps, step, min, max, readOnly };
+    const mergedSlotProps = {
+        ...rest.slotProps,
+        htmlInput: { ...inputProps, ...rest.slotProps?.htmlInput },
+    };
 
     // This is a controlled input that renders directly the string typed by the user.
     // This string is converted to a number on change, and stored in the form state,
@@ -169,8 +173,10 @@ export const NumberInput = (props: NumberInputProps) => {
                 ) : null
             }
             margin={margin}
-            inputProps={{ ...inputProps, readOnly }}
+            inputProps={inputProps}
             {...sanitizeInputRestProps(rest)}
+            // @ts-expect-error slotProps do not yet exist in MUI v5
+            slotProps={mergedSlotProps}
         />
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.tsx b/packages/ra-ui-materialui/src/input/ResettableTextField.tsx
@@ -148,23 +148,32 @@ export const ResettableTextField = forwardRef(
             }
         };
 
+        const inputProps = {
+            readOnly: readOnly,
+            classes:
+                props.select && variant === 'filled'
+                    ? { adornedEnd: inputAdornedEnd }
+                    : {},
+            endAdornment: getEndAdornment(),
+            ...InputPropsWithoutEndAdornment,
+        };
+
+        const mergedSlotProps = {
+            ...rest.slotProps,
+            input: { ...inputProps, ...rest.slotProps?.input },
+        };
+
         return (
             <StyledTextField
                 value={value}
-                InputProps={{
-                    readOnly: readOnly,
-                    classes:
-                        props.select && variant === 'filled'
-                            ? { adornedEnd: inputAdornedEnd }
-                            : {},
-                    endAdornment: getEndAdornment(),
-                    ...InputPropsWithoutEndAdornment,
-                }}
+                InputProps={inputProps}
                 disabled={disabled || readOnly}
                 variant={variant}
                 margin={margin}
                 className={className}
                 {...rest}
+                // @ts-expect-error slotProps do not yet exist in MUI v5
+                slotProps={mergedSlotProps}
                 inputRef={ref}
             />
         );
diff --git a/packages/ra-ui-materialui/src/input/TimeInput.tsx b/packages/ra-ui-materialui/src/input/TimeInput.tsx
@@ -89,6 +89,11 @@ export const TimeInput = (props: TimeInputProps) => {
 
     const renderHelperText = helperText !== false || invalid;
 
+    const mergedSlotProps = {
+        ...rest.slotProps,
+        inputLabel: { ...defaultInputLabelProps, ...rest.slotProps?.inputLabel },
+    };
+
     return (
         <StyledTextField
             id={id}
@@ -121,6 +126,8 @@ export const TimeInput = (props: TimeInputProps) => {
             }
             InputLabelProps={defaultInputLabelProps}
             {...sanitizeInputRestProps(rest)}
+            // @ts-expect-error slotProps do not yet exist in MUI v5
+            slotProps={mergedSlotProps}
         />
     );
 };
diff --git a/packages/ra-ui-materialui/src/layout/Confirm.tsx b/packages/ra-ui-materialui/src/layout/Confirm.tsx
@@ -15,7 +15,7 @@ import {
     useThemeProps,
 } from '@mui/material/styles';
 import ActionCheck from '@mui/icons-material/CheckCircle';
-import AlertError from '@mui/icons-material/ErrorOutline';
+import AlertError from '@mui/icons-material/ErrorOutlined';
 import clsx from 'clsx';
 import { useTranslate } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/layout/Notification.tsx b/packages/ra-ui-materialui/src/layout/Notification.tsx
@@ -133,6 +133,23 @@ export const Notification = (inProps: NotificationProps) => {
         ...options
     } = notificationOptions || {};
 
+    const transitionProps = { onExited: handleExited };
+    const contentProps = {
+        className: clsx(
+            NotificationClasses[typeFromMessage || type],
+            {
+                [NotificationClasses.multiLine]:
+                    multilineFromMessage || multiLine,
+            }
+        ),
+    };
+
+    const mergedSlotProps = {
+        ...rest.slotProps,
+        transition: { ...transitionProps, ...rest.slotProps?.transition },
+        content: { ...contentProps, ...rest.slotProps?.content },
+    };
+
     return (
         <CloseNotificationContext.Provider value={handleRequestClose}>
             <StyledSnackbar
@@ -151,17 +168,9 @@ export const Notification = (inProps: NotificationProps) => {
                         : autoHideDurationFromMessage ?? undefined
                 }
                 disableWindowBlurListener={undoable}
-                TransitionProps={{ onExited: handleExited }}
+                TransitionProps={transitionProps}
+                ContentProps={contentProps}
                 onClose={handleRequestClose}
-                ContentProps={{
-                    className: clsx(
-                        NotificationClasses[typeFromMessage || type],
-                        {
-                            [NotificationClasses.multiLine]:
-                                multilineFromMessage || multiLine,
-                        }
-                    ),
-                }}
                 action={
                     undoable ? (
                         <Button
@@ -177,6 +186,8 @@ export const Notification = (inProps: NotificationProps) => {
                 anchorOrigin={anchorOrigin}
                 {...rest}
                 {...options}
+                // @ts-expect-error slotProps do not yet exist in MUI v5
+                slotProps={mergedSlotProps}
             >
                 {message &&
                 typeof message !== 'string' &&
diff --git a/packages/ra-ui-materialui/src/list/Empty.tsx b/packages/ra-ui-materialui/src/list/Empty.tsx
@@ -39,7 +39,9 @@ export const Empty = (inProps: EmptyProps) => {
         <Root className={className}>
             <div className={EmptyClasses.message}>
                 <Inbox className={EmptyClasses.icon} />
-                <Typography variant="h4" paragraph>
+                <Typography variant="h4" sx={{
+                    marginBottom: "16px"
+                }}>
                     {translate(`resources.${resource}.empty`, {
                         _: emptyMessage,
                     })}
diff --git a/packages/ra-ui-materialui/src/list/ListGuesser.tsx b/packages/ra-ui-materialui/src/list/ListGuesser.tsx
@@ -169,7 +169,9 @@ const ListGuesserEmpty = (inProps: ListGuesserEmptyProps) => {
         <ListGuesserEmptyRoot className={className}>
             <Box className={ListGuesserEmptyClasses.message}>
                 <Inbox className={ListGuesserEmptyClasses.icon} />
-                <Typography variant="h4" paragraph>
+                <Typography variant="h4" sx={{
+                    marginBottom: "16px"
+                }}>
                     {translate('ra.guesser.empty.title', {
                         _: 'No data to display',
                     })}
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeader.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeader.tsx
@@ -83,6 +83,10 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
             : data.map(record => record.id)
         : [];
 
+    const selectAllInputProps = {
+        'aria-label': translate('ra.action.select_all', { _: 'Select all' }),
+    };
+
     return (
         <TableHead className={clsx(className, DatagridClasses.thead)}>
             <TableRow
@@ -109,12 +113,9 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
                         className={DatagridClasses.headerCell}
                     >
                         <Checkbox
-                            inputProps={{
-                                'aria-label': translate(
-                                    'ra.action.select_all',
-                                    { _: 'Select all' }
-                                ),
-                            }}
+                            inputProps={selectAllInputProps}
+                            // @ts-expect-error slotProps do not yet exist in MUI v5
+                            slotProps={{ input: selectAllInputProps }}
                             className="select-all"
                             color="primary"
                             checked={
diff --git a/packages/ra-ui-materialui/src/list/datatable/SelectPageCheckbox.tsx b/packages/ra-ui-materialui/src/list/datatable/SelectPageCheckbox.tsx
@@ -47,13 +47,15 @@ export const SelectPageCheckbox = () => {
             : data.map(record => record.id)
         : [];
 
+    const selectAllInputProps = {
+        'aria-label': translate('ra.action.select_all', { _: 'Select all' }),
+    };
+
     return (
         <Checkbox
-            inputProps={{
-                'aria-label': translate('ra.action.select_all', {
-                    _: 'Select all',
-                }),
-            }}
+            inputProps={selectAllInputProps}
+            // @ts-expect-error slotProps do not yet exist in MUI v5
+            slotProps={{ input: selectAllInputProps }}
             className="select-all"
             color="primary"
             checked={
diff --git a/packages/ra-ui-materialui/src/list/filter/AddSavedQueryIconButton.tsx b/packages/ra-ui-materialui/src/list/filter/AddSavedQueryIconButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { IconButton, IconButtonProps } from '@mui/material';
-import AddIcon from '@mui/icons-material/AddCircleOutline';
+import AddIcon from '@mui/icons-material/AddCircleOutlined';
 import { useTranslate } from 'ra-core';
 
 import { AddSavedQueryDialog } from './AddSavedQueryDialog';
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
@@ -5,7 +5,7 @@ import {
     useThemeProps,
 } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
-import ActionHide from '@mui/icons-material/RemoveCircleOutline';
+import ActionHide from '@mui/icons-material/RemoveCircleOutlined';
 import clsx from 'clsx';
 import { useResourceContext, useTranslate } from 'ra-core';
 
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterList.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterList.stories.tsx
@@ -7,7 +7,7 @@ import {
 } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { Box, Typography, Card, CardContent } from '@mui/material';
-import MailIcon from '@mui/icons-material/MailOutline';
+import MailIcon from '@mui/icons-material/MailOutlined';
 import BiotechIcon from '@mui/icons-material/Biotech';
 import NewspaperIcon from '@mui/icons-material/Newspaper';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterList.tsx b/packages/ra-ui-materialui/src/list/filter/FilterList.tsx
@@ -17,7 +17,7 @@ import { FilterListSection } from './FilterListSection';
  *
  * import * as React from 'react';
  * import { Card, CardContent } from '@mui/material';
- * import MailIcon from '@mui/icons-material/MailOutline';
+ * import MailIcon from '@mui/icons-material/MailOutlined';
  * import { FilterList, FilterListItem } from 'react-admin';
  *
  * const FilterSidebar = () => (
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
@@ -42,7 +42,7 @@ const arePropsEqual = (prevProps, nextProps) =>
  *
  * import * as React from 'react';
  * import { Card, CardContent } from '@mui/material';
- * import MailIcon from '@mui/icons-material/MailOutline';
+ * import MailIcon from '@mui/icons-material/MailOutlined';
  * import { FilterList, FilterListItem } from 'react-admin';
  *
  * const FilterSidebar = () => (
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListSection.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListSection.stories.tsx
@@ -1,5 +1,5 @@
 import CategoryIcon from '@mui/icons-material/LocalOffer';
-import MailIcon from '@mui/icons-material/MailOutline';
+import MailIcon from '@mui/icons-material/MailOutlined';
 import { Card, CardContent, List, ListItem, Typography } from '@mui/material';
 import * as React from 'react';
 
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListSection.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListSection.tsx
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx
diff --git a/packages/ra-ui-materialui/src/list/filter/RemoveSavedQueryIconButton.tsx b/packages/ra-ui-materialui/src/list/filter/RemoveSavedQueryIconButton.tsx
diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.tsx
diff --git a/packages/ra-ui-materialui/src/preferences/Configurable.tsx b/packages/ra-ui-materialui/src/preferences/Configurable.tsx
diff --git a/packages/ra-ui-materialui/src/preferences/Inspector.tsx b/packages/ra-ui-materialui/src/preferences/Inspector.tsx
diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts
diff --git a/packages/ra-ui-materialui/src/theme/defaultTheme.ts b/packages/ra-ui-materialui/src/theme/defaultTheme.ts
diff --git a/packages/ra-ui-materialui/src/theme/houseTheme.ts b/packages/ra-ui-materialui/src/theme/houseTheme.ts
diff --git a/packages/ra-ui-materialui/src/theme/radiantTheme.ts b/packages/ra-ui-materialui/src/theme/radiantTheme.ts
diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ import { useListContext } from '../controller/list/useListContext';`
`24`	`24`	`* at other places to create your own filter UI.`
`25`	`25`	`*`
`26`	`26`	`* @example`
`27`		`- * import MailIcon from '@mui/icons-material/MailOutline';`
	`27`	`+ * import MailIcon from '@mui/icons-material/MailOutlined';`
`28`	`28`	`* import TitleIcon from '@mui/icons-material/Title';`
`29`	`29`	`* import { Card, CardContent } from '@mui/material';`
`30`	`30`	`* import * as React from 'react';`