Upgrade to v9
This guide explains how to upgrade from Material UI v7 to v9.
ads via Carbon
Take our 5-minute assessment to get your personalized roadmap for AI-powered development.
ads via Carbon

Why you should upgrade to Material UI v9

Improved accessibility and platform alignment

Material UI v9 continues improving the accessibility and semantics of core components. This release includes updates to keyboard navigation, focus management, and DOM structure so components align more closely with web platform, accessibility expectations and modern assistive technology behavior.

Quality-of-life improvements

Material UI v9 also includes a number of quality-of-life improvements, including:

removal of deprecated APIs to reduce the API surface and make the docs easier to navigate
improved consistency across slot and slotProps APIs
better defaults and behaviors for modern browser environments
If you're using any of these packages, you should also update them to compatible v9 versions:

@mui/icons-material to 9.0.0
@mui/system to 9.0.0
@mui/lab to the latest v9 beta release
@mui/material-nextjs to 9.0.0
@mui/styled-engine to 9.0.0
@mui/styled-engine-sc to 9.0.0
@mui/utils to 9.0.0
Supported browsers and versions

The default bundle targets have changed in v9.

Chrome 117 (up from 109)
Edge 121
Firefox 121 (up from 115)
Safari 17.0 in both macOS and iOS (up from 15.4)
and more (see .browserslistrc stable entry)
Breaking changes

Since v9 is a new major release, it contains some changes that affect the public API. The steps you need to take to migrate from Material UI v7 to v9 are described below.

Autocomplete

Listbox toggle on right click
The listbox does not toggle anymore when using right click on the input. The left click toggle behavior remains unchanged.

freeSolo type related changes
When freeSolo is true:

The getOptionLabel prop accepts string for its option argument
The isOptionEqualToValue prop accepts string for its value argument
- isOptionEqualToValue?: (option: Value, value: Value) => boolean;
+ isOptionEqualToValue?: (
+  option: Value,
+  value: AutocompleteValueOrFreeSoloValueMapping<Value, FreeSolo>,
+ ) => boolean;

Copy
- getOptionLabel?: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
+ getOptionLabel?: (option: AutocompleteValueOrFreeSoloValueMapping<Value, FreeSolo>) => string;

Copy
For reference:

type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true
  ? string
  : never;

type AutocompleteValueOrFreeSoloValueMapping<Value, FreeSolo> = FreeSolo extends true
  ? Value | string
  : Value;

Copy
Backdrop

The Backdrop component no longer adds the aria-hidden="true" attribute to the Root slot by default.

ButtonBase

Click event propagation from Enter and Spacebar
When sending Enter and Spacebar keys on the ButtonBase or components that are composed from ButtonBase, the click event now bubbles to their ancestors.

Also, the event passed to the onClick prop is a MouseEvent instead of the KeyboardEvent captured in the ButtonBase keyboard handlers. This matches the expected behavior.

Event handlers on disabled non-native buttons
When ButtonBase renders a non-native element like a <span>, keyboard and click event handlers will no longer run when the component is disabled.

Replacing native button elements with non-interactive elements
The nativeButton prop is available on <ButtonBase> and all button-like components to ensure that they are rendered with the correct HTML attributes before hydration, for example during server-side rendering.

This should be specified when passing a React component to the component prop of a button-like component that either replaces the default rendered element:

From a native <button> to a non-interactive element like a <div>, or
From a non-button like a <div> to a native <button>
const CustomButton = React.forwardRef(function CustomButton(props, ref) {
  return <div ref={ref} {...props} />;
})

<Button component={CustomButton} nativeButton={false}>
  OK
</Button>

Copy
A warning will be shown in development mode if the nativeButton prop is incorrectly omitted, or if the resolved element does not match the value of the prop.

The prop can be used for: <ButtonBase>, <Button>, <Fab>, <IconButton>, <ListItemButton>, <MenuItem>, <StepButton>, <Tab>, <ToggleButton>, <AccordionSummary>, <BottomNavigationAction>, <CardActionArea>, <TableSortLabel> and <PaginationItem>.

Dialog & Modal

The disableEscapeKeyDown prop has been removed. The same behavior could be achieved by checking the value of the reason argument in onClose:

  const [open, setOpen] = React.useState(true);
- const handleClose = () => {
-   setOpen(false);
- };
+ const handleClose = (_event: React.SyntheticEvent<unknown>, reason: string) => {
+   if (reason !== 'escapeKeyDown') {
+     setOpen(false);
+   }
+ };
  return (
-  <Dialog open={open} disableEscapeKeyDown onClose={handleClose}>
+  <Dialog open={open} onClose={handleClose}>
    {/* ... */}
  </Dialog>
  );

Copy
The same applies to Modal.

GridLegacy

The GridLegacy component is removed, use the Grid component instead.

The main API differences are:

The item prop is no longer needed.
The xs, sm, md, lg, xl props are replaced by the size prop.
-import Grid from '@mui/material/GridLegacy';
+import Grid from '@mui/material/Grid';

 <Grid container spacing={2}>
-  <Grid item xs={12} sm={6}>
+  <Grid size={{ xs: 12, sm: 6 }}>
     ...
   </Grid>
 </Grid>

Copy
See the Grid v2 migration guide for more details.

MuiGridLegacy has also been removed from the theme components types (ComponentsProps, ComponentsOverrides, and ComponentsVariants).

List

The ListItemIcon default min-width has changed to 36px (previously 56px) to be consistent with the menu item, and now uses theme.spacing instead of a hardcoded number.

Material Icons

23 legacy icon exports that ended with Outline (without the "d") have been removed. These were exact duplicates of their Outlined counterparts (for example, InfoOutline had the same SVG as InfoOutlined).

To migrate, rename the import to use the Outlined suffix:

-import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';

Copy
The full list of removed exports: AddCircleOutline, ChatBubbleOutline, CheckCircleOutline, DeleteOutline, DoneOutline, DriveFileMoveOutline, ErrorOutline, HelpOutline, InfoOutline, LabelImportantOutline, LightbulbOutline, LockOutline, MailOutline, ModeEditOutline, PauseCircleOutline, PeopleOutline, PersonOutline, PieChartOutline, PlayCircleOutline, RemoveCircleOutline, StarOutline, WorkOutline, WorkspacesOutline.

Theme variants of these icons (for example, InfoOutlineRounded, DeleteOutlineSharp) are not affected and remain available.

Menu and MenuList

When using variant="selectedMenu", the tabindex attribute for each menu item will change on Arrow Key, Home / End or Character Key navigation. Previously, keyboard navigation moved DOM focus without updating tabindex on focused items. Now, we move DOM focus and also add tabindex="0" to the focused element. The previously focused element will have its tabindex updated to -1 in order to keep only one focusable MenuItem at a time.

This change also applies to both Menu and MenuList with variant="selectedMenu".

The autoFocus prop in MenuList does not set tabindex="0" on the List component anymore. It will always stay as -1.

MenuItems will throw an error when rendered outside of Menu or MenuList.

Keyboard navigation now supports MenuItems inside React.Fragment.

Custom non-interactive menu content such as ListSubheader or Divider no longer need to set muiSkipListHighlight to opt-out of the menu's focus management.

Custom children that set role="menuitem" but do not wrap the MenuItem component are no longer supported inside Menu or MenuList.

Slider

The Slider component uses pointer events instead of mouse events. Previously, onMouseDown={(event) => event.preventDefault()} would cancel a drag from starting. Now, onPointerDown must be used instead.

Stepper, Step and StepButton

The Stepper and Step markups have changed to improve their semantics:

Stepper returns a <ol> element instead of <div>.
Step returns a <li> element instead of <div>.
The Stepper component now supports keyboard navigation when used with StepButton descendants. The navigation is implemented as a roving tabindex, supporting Arrow Keys as well as Home and End. Only one StepButton is focusable at a time, by having tabindex="0", while the rest all have tabindex="-1". Once selection is changed by Arrow Keys or Home / End, the tabindex value is also updated.

The markup for a Stepper with StepButton descendants has changed further to reflect this behavior. These changes apply on top of the tag changes described above.

The Stepper has:

The role of tablist.
The aria-orientation added. The value is either horizontal or vertical depending on the orientation prop.
The StepButton has:

The role of tab.
The aria-current changed to aria-selected. The value is true when step is selected, and false otherwise.
The aria-setsize added. The value is the total number of steps.
The aria-posinset added. The value is the index of the step inside the list, 1-based.
TablePagination numbers are formatted by default

Pagination numbers in TablePagination are now formatted using Intl.NumberFormat according to the locale. For example, 103177 is displayed as 103,177 in en-US or 103.177 in de-DE.

To opt out of number formatting, provide a custom labelDisplayedRows function:

<TablePagination
  labelDisplayedRows={({ from, to, count }) =>
    `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`
  }
/>

Copy
Or when using a locale:

import { enUS } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  enUS,
  {
    components: {
      MuiTablePagination: {
        defaultProps: {
          labelDisplayedRows: ({ from, to, count }) =>
            `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
        },
      },
    },
  },
);

Copy
Tabs

The tabindex attribute for each tab will be changed on Arrow Key or Home / End navigation. Previously, keyboard navigation moved DOM focus without updating tabindex on the focused Tab. Now, we move DOM focus and also add the tabindex="0" to the focused Tab. Other tabs will have tabindex="-1" to keep only one focusable Tab at a time.

Selecting a Tab will update the focus and tabindex as before.

Tabs not placed inside Tabs will now throw an error.

TextField

When specifying <TextField select /> to render a <Select>, the underlying <InputLabel> renders a <div> instead of a native <label> element. This does not affect <InputLabel> on its own.

Theme

MuiTouchRipple has been removed from the theme components types (ComponentsProps, ComponentsOverrides, and ComponentsVariants). TouchRipple has been an internal component since v5 and never consumed theme overrides or default props, so the types were misleading.

If you were using MuiTouchRipple in your theme, remove it and use global CSS with the MuiTouchRipple-* class names instead:

 const theme = createTheme({
   components: {
-    MuiTouchRipple: {
-      styleOverrides: {
-        root: { color: 'red' },
-      },
-    },
+    MuiButtonBase: {
+      styleOverrides: {
+        root: {
+          '& .MuiTouchRipple-root': { color: 'red' },
+        },
+      },
+    },
   },
 });

Copy
jsdom support

The behavior of the components in test environments has been improved to be more reliable. The use of process.env.NODE_ENV === 'test' has been replaced with feature detection or user-agent sniffing wherever it more accurately reflects the intention of the code. This change shouldn't impact most users, but it might lead to unintended CI changes. For example, the code has been updated to auto-detect DOM environments that don't support layout, such as jsdom and happy-dom, with user-agent sniffing.

Deprecated APIs removed (Breaking)

APIs that were deprecated earlier have been removed in v9.

Accordion props

Use the accordion-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/accordion-props <path>

Copy
The following deprecated props have been removed from the Accordion component:

TransitionComponent → use slots.transition
TransitionProps → use slotProps.transition
 <Accordion
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ unmountOnExit: true }}
+  slots={{ transition: CustomTransition }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 >

Copy
AccordionSummary CSS classes

Use the accordion-summary-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/accordion-summary-classes <path>

Copy
The deprecated AccordionSummary CSS class contentGutters has been removed. Use the combination of .MuiAccordionSummary-gutters and .MuiAccordionSummary-content classes instead:

-.MuiAccordionSummary-contentGutters {
+.MuiAccordionSummary-gutters .MuiAccordionSummary-content {
   margin: 20px 0;
 }

Copy
Alert CSS classes

Use the alert-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/alert-classes <path>

Copy
The following deprecated Alert CSS classes have been removed:

standardSuccess → use .MuiAlert-standard.MuiAlert-colorSuccess
standardInfo → use .MuiAlert-standard.MuiAlert-colorInfo
standardWarning → use .MuiAlert-standard.MuiAlert-colorWarning
standardError → use .MuiAlert-standard.MuiAlert-colorError
outlinedSuccess → use .MuiAlert-outlined.MuiAlert-colorSuccess
outlinedInfo → use .MuiAlert-outlined.MuiAlert-colorInfo
outlinedWarning → use .MuiAlert-outlined.MuiAlert-colorWarning
outlinedError → use .MuiAlert-outlined.MuiAlert-colorError
filledSuccess → use .MuiAlert-filled.MuiAlert-colorSuccess
filledInfo → use .MuiAlert-filled.MuiAlert-colorInfo
filledWarning → use .MuiAlert-filled.MuiAlert-colorWarning
filledError → use .MuiAlert-filled.MuiAlert-colorError
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the root override instead:

 const theme = createTheme({
   components: {
     MuiAlert: {
       styleOverrides: {
-        standardSuccess: { color: 'green' },
-        standardInfo: { color: 'blue' },
-        standardWarning: { color: 'orange' },
-        standardError: { color: 'red' },
-        outlinedSuccess: { borderColor: 'green' },
-        outlinedInfo: { borderColor: 'blue' },
-        outlinedWarning: { borderColor: 'orange' },
-        outlinedError: { borderColor: 'red' },
-        filledSuccess: { backgroundColor: 'green' },
-        filledInfo: { backgroundColor: 'blue' },
-        filledWarning: { backgroundColor: 'orange' },
-        filledError: { backgroundColor: 'red' },
+        root: {
+          variants: [
+            { props: { variant: 'standard', color: 'success' }, style: { color: 'green' } },
+            { props: { variant: 'standard', color: 'info' }, style: { color: 'blue' } },
+            { props: { variant: 'standard', color: 'warning' }, style: { color: 'orange' } },
+            { props: { variant: 'standard', color: 'error' }, style: { color: 'red' } },
+            { props: { variant: 'outlined', color: 'success' }, style: { borderColor: 'green' } },
+            { props: { variant: 'outlined', color: 'info' }, style: { borderColor: 'blue' } },
+            { props: { variant: 'outlined', color: 'warning' }, style: { borderColor: 'orange' } },
+            { props: { variant: 'outlined', color: 'error' }, style: { borderColor: 'red' } },
+            { props: { variant: 'filled', color: 'success' }, style: { backgroundColor: 'green' } },
+            { props: { variant: 'filled', color: 'info' }, style: { backgroundColor: 'blue' } },
+            { props: { variant: 'filled', color: 'warning' }, style: { backgroundColor: 'orange' } },
+            { props: { variant: 'filled', color: 'error' }, style: { backgroundColor: 'red' } },
+          ],
+        },
       },
     },
   },
 });

Copy
Alert props

Use the alert-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/alert-props <path>

Copy
The following deprecated props have been removed from the Alert component:

components → use slots
componentsProps → use slotProps
 <Alert
   onClose={handleClose}
-  components={{ CloseIcon: MyCloseIcon, CloseButton: MyCloseButton }}
-  componentsProps={{ closeButton: { size: 'large' }, closeIcon: { fontSize: 'small' } }}
+  slots={{ closeIcon: MyCloseIcon, closeButton: MyCloseButton }}
+  slotProps={{ closeButton: { size: 'large' }, closeIcon: { fontSize: 'small' } }}
 />

Copy
Avatar props

Use the avatar-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/avatar-props <path>

Copy
The following deprecated props have been removed from the Avatar component:

imgProps → use slotProps.img
-<Avatar imgProps={{ crossOrigin: 'anonymous', referrerPolicy: 'no-referrer' }} />
+<Avatar slotProps={{ img: { crossOrigin: 'anonymous', referrerPolicy: 'no-referrer' } }} />

Copy
AvatarGroup props

Use the avatar-group-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/avatar-group-props <path>

Copy
The following deprecated props have been removed from the AvatarGroup component:

componentsProps → use slotProps (the additionalAvatar key has been renamed to surplus)
-<AvatarGroup componentsProps={{ additionalAvatar: { className: 'my-class' } }}>
+<AvatarGroup slotProps={{ surplus: { className: 'my-class' } }}>

Copy
If you were already using the surplus key via componentsProps, move it to slotProps:

-<AvatarGroup componentsProps={{ surplus: { className: 'my-class' } }}>
+<AvatarGroup slotProps={{ surplus: { className: 'my-class' } }}>

Copy
Autocomplete props

Use the autocomplete-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/autocomplete-props <path>

Copy
The following deprecated props have been removed from the Autocomplete component:

ChipProps → use slotProps.chip
componentsProps → use slotProps
ListboxComponent → use slots.listbox
ListboxProps → use slotProps.listbox
PaperComponent → use slots.paper
PopperComponent → use slots.popper
renderTags → use renderValue
 <Autocomplete
   multiple
   options={options}
   renderInput={(params) => <TextField {...params} />}
-  ChipProps={{ size: 'small' }}
-  componentsProps={{
-    clearIndicator: { size: 'large' },
-    paper: { elevation: 2 },
-    popper: { placement: 'bottom-end' },
-    popupIndicator: { size: 'large' },
-  }}
-  ListboxComponent={CustomListbox}
-  ListboxProps={{ style: { maxHeight: 200 }, ref }}
-  PaperComponent={CustomPaper}
-  PopperComponent={(props) => {
-    const { disablePortal, anchorEl, open, ...other } = props;
-    return <Box {...other} />;
-  }}
-  renderTags={(value, getTagProps, ownerState) =>
-    value.map((option, index) => (
-      <Chip label={option.label} {...getTagProps({ index })} />
-    ))
-  }
+  slots={{
+    listbox: CustomListbox,
+    paper: CustomPaper,
+    popper: (props) => {
+      const { disablePortal, anchorEl, open, ...other } = props;
+      return <Box {...other} />;
+    },
+  }}
+  slotProps={{
+    chip: { size: 'small' },
+    clearIndicator: { size: 'large' },
+    listbox: { style: { maxHeight: 200 }, ref },
+    paper: { elevation: 2 },
+    popper: { placement: 'bottom-end' },
+    popupIndicator: { size: 'large' },
+  }}
+  renderValue={(value, getItemProps, ownerState) =>
+    value.map((option, index) => (
+      <Chip label={option.label} {...getItemProps({ index })} />
+    ))
+  }
 />

Copy
useAutocomplete fields

Use the autocomplete-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/autocomplete-props <path>

Copy
The following deprecated members have been removed from the useAutocomplete hook return value:

getTagProps → use getItemProps
focusedTag → use focusedItem
getTagProps
 const {
-  getTagProps,
+  getItemProps,
 } = useAutocomplete(props);

 // ...
-<Chip {...getTagProps({ index })} />
+<Chip {...getItemProps({ index })} />

Copy
focusedTag
 const {
-  focusedTag,
+  focusedItem,
 } = useAutocomplete(props);

Copy
Backdrop props

Use the backdrop-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/backdrop-props <path>

Copy
The following deprecated Backdrop props have been removed:

components — use slots instead
componentsProps — use slotProps instead
TransitionComponent — use slots.transition instead
 <Backdrop
-  components={{ Root: CustomRoot }}
-  componentsProps={{ root: { className: 'my-class' } }}
-  TransitionComponent={CustomTransition}
+  slots={{ root: CustomRoot, transition: CustomTransition }}
+  slotProps={{ root: { className: 'my-class' } }}

Copy
Badge props

Use the badge-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/badge-props <path>

Copy
The following deprecated props have been removed from the Badge component:

components → use slots
componentsProps → use slotProps
 <Badge
-  components={{ Root: CustomRoot, Badge: CustomBadge }}
-  componentsProps={{ root: { className: 'my-root' }, badge: { className: 'my-badge' } }}
+  slots={{ root: CustomRoot, badge: CustomBadge }}
+  slotProps={{ root: { className: 'my-root' }, badge: { className: 'my-badge' } }}
 />

Copy
Button CSS classes

Use the button-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/button-classes <path>

Copy
The following deprecated Button CSS classes have been removed:

textInherit → use .MuiButton-text.MuiButton-colorInherit
textPrimary → use .MuiButton-text.MuiButton-colorPrimary
textSecondary → use .MuiButton-text.MuiButton-colorSecondary
textSuccess → use .MuiButton-text.MuiButton-colorSuccess
textError → use .MuiButton-text.MuiButton-colorError
textInfo → use .MuiButton-text.MuiButton-colorInfo
textWarning → use .MuiButton-text.MuiButton-colorWarning
outlinedInherit → use .MuiButton-outlined.MuiButton-colorInherit
outlinedPrimary → use .MuiButton-outlined.MuiButton-colorPrimary
outlinedSecondary → use .MuiButton-outlined.MuiButton-colorSecondary
outlinedSuccess → use .MuiButton-outlined.MuiButton-colorSuccess
outlinedError → use .MuiButton-outlined.MuiButton-colorError
outlinedInfo → use .MuiButton-outlined.MuiButton-colorInfo
outlinedWarning → use .MuiButton-outlined.MuiButton-colorWarning
containedInherit → use .MuiButton-contained.MuiButton-colorInherit
containedPrimary → use .MuiButton-contained.MuiButton-colorPrimary
containedSecondary → use .MuiButton-contained.MuiButton-colorSecondary
containedSuccess → use .MuiButton-contained.MuiButton-colorSuccess
containedError → use .MuiButton-contained.MuiButton-colorError
containedInfo → use .MuiButton-contained.MuiButton-colorInfo
containedWarning → use .MuiButton-contained.MuiButton-colorWarning
textSizeSmall → use .MuiButton-text.MuiButton-sizeSmall
textSizeMedium → use .MuiButton-text.MuiButton-sizeMedium
textSizeLarge → use .MuiButton-text.MuiButton-sizeLarge
outlinedSizeSmall → use .MuiButton-outlined.MuiButton-sizeSmall
outlinedSizeMedium → use .MuiButton-outlined.MuiButton-sizeMedium
outlinedSizeLarge → use .MuiButton-outlined.MuiButton-sizeLarge
containedSizeSmall → use .MuiButton-contained.MuiButton-sizeSmall
containedSizeMedium → use .MuiButton-contained.MuiButton-sizeMedium
containedSizeLarge → use .MuiButton-contained.MuiButton-sizeLarge
iconSizeSmall → use .MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon
iconSizeMedium → use .MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon
iconSizeLarge → use .MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the root override instead:

 const theme = createTheme({
   components: {
     MuiButton: {
       styleOverrides: {
-        textInherit: { color: 'inherit' },
-        textPrimary: { color: 'blue' },
-        textSecondary: { color: 'purple' },
-        textSuccess: { color: 'green' },
-        textError: { color: 'red' },
-        textInfo: { color: 'cyan' },
-        textWarning: { color: 'orange' },
-        outlinedInherit: { borderColor: 'inherit' },
-        outlinedPrimary: { borderColor: 'blue' },
-        outlinedSecondary: { borderColor: 'purple' },
-        outlinedSuccess: { borderColor: 'green' },
-        outlinedError: { borderColor: 'red' },
-        outlinedInfo: { borderColor: 'cyan' },
-        outlinedWarning: { borderColor: 'orange' },
-        containedInherit: { backgroundColor: 'inherit' },
-        containedPrimary: { backgroundColor: 'blue' },
-        containedSecondary: { backgroundColor: 'purple' },
-        containedSuccess: { backgroundColor: 'green' },
-        containedError: { backgroundColor: 'red' },
-        containedInfo: { backgroundColor: 'cyan' },
-        containedWarning: { backgroundColor: 'orange' },
-        textSizeSmall: { fontSize: '0.75rem' },
-        textSizeMedium: { fontSize: '0.875rem' },
-        textSizeLarge: { fontSize: '1rem' },
-        outlinedSizeSmall: { fontSize: '0.75rem' },
-        outlinedSizeMedium: { fontSize: '0.875rem' },
-        outlinedSizeLarge: { fontSize: '1rem' },
-        containedSizeSmall: { fontSize: '0.75rem' },
-        containedSizeMedium: { fontSize: '0.875rem' },
-        containedSizeLarge: { fontSize: '1rem' },
-        iconSizeSmall: { fontSize: '18px' },
-        iconSizeMedium: { fontSize: '20px' },
-        iconSizeLarge: { fontSize: '22px' },
+        root: {
+          variants: [
+            { props: { variant: 'text', color: 'inherit' }, style: { color: 'inherit' } },
+            { props: { variant: 'text', color: 'primary' }, style: { color: 'blue' } },
+            { props: { variant: 'text', color: 'secondary' }, style: { color: 'purple' } },
+            { props: { variant: 'text', color: 'success' }, style: { color: 'green' } },
+            { props: { variant: 'text', color: 'error' }, style: { color: 'red' } },
+            { props: { variant: 'text', color: 'info' }, style: { color: 'cyan' } },
+            { props: { variant: 'text', color: 'warning' }, style: { color: 'orange' } },
+            { props: { variant: 'outlined', color: 'inherit' }, style: { borderColor: 'inherit' } },
+            { props: { variant: 'outlined', color: 'primary' }, style: { borderColor: 'blue' } },
+            { props: { variant: 'outlined', color: 'secondary' }, style: { borderColor: 'purple' } },
+            { props: { variant: 'outlined', color: 'success' }, style: { borderColor: 'green' } },
+            { props: { variant: 'outlined', color: 'error' }, style: { borderColor: 'red' } },
+            { props: { variant: 'outlined', color: 'info' }, style: { borderColor: 'cyan' } },
+            { props: { variant: 'outlined', color: 'warning' }, style: { borderColor: 'orange' } },
+            { props: { variant: 'contained', color: 'inherit' }, style: { backgroundColor: 'inherit' } },
+            { props: { variant: 'contained', color: 'primary' }, style: { backgroundColor: 'blue' } },
+            { props: { variant: 'contained', color: 'secondary' }, style: { backgroundColor: 'purple' } },
+            { props: { variant: 'contained', color: 'success' }, style: { backgroundColor: 'green' } },
+            { props: { variant: 'contained', color: 'error' }, style: { backgroundColor: 'red' } },
+            { props: { variant: 'contained', color: 'info' }, style: { backgroundColor: 'cyan' } },
+            { props: { variant: 'contained', color: 'warning' }, style: { backgroundColor: 'orange' } },
+            { props: { variant: 'text', size: 'small' }, style: { fontSize: '0.75rem' } },
+            { props: { variant: 'text', size: 'medium' }, style: { fontSize: '0.875rem' } },
+            { props: { variant: 'text', size: 'large' }, style: { fontSize: '1rem' } },
+            { props: { variant: 'outlined', size: 'small' }, style: { fontSize: '0.75rem' } },
+            { props: { variant: 'outlined', size: 'medium' }, style: { fontSize: '0.875rem' } },
+            { props: { variant: 'outlined', size: 'large' }, style: { fontSize: '1rem' } },
+            { props: { variant: 'contained', size: 'small' }, style: { fontSize: '0.75rem' } },
+            { props: { variant: 'contained', size: 'medium' }, style: { fontSize: '0.875rem' } },
+            { props: { variant: 'contained', size: 'large' }, style: { fontSize: '1rem' } },
+            { props: { size: 'small' }, style: { '& .MuiButton-icon': { fontSize: '18px' } } },
+            { props: { size: 'medium' }, style: { '& .MuiButton-icon': { fontSize: '20px' } } },
+            { props: { size: 'large' }, style: { '& .MuiButton-icon': { fontSize: '22px' } } },
+          ],
+        },
       },
     },
   },
 });

Copy
ButtonGroup CSS classes

Use the button-group-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/button-group-classes <path>

Copy
The following deprecated ButtonGroup CSS classes have been removed:

groupedHorizontal → use .MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
groupedVertical → use .MuiButtonGroup-vertical > .MuiButtonGroup-grouped
groupedText → use .MuiButtonGroup-text > .MuiButtonGroup-grouped
groupedTextHorizontal → use .MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
groupedTextVertical → use .MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
groupedTextPrimary → use .MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
groupedTextSecondary → use .MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped
groupedOutlined → use .MuiButtonGroup-outlined > .MuiButtonGroup-grouped
groupedOutlinedHorizontal → use .MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
groupedOutlinedVertical → use .MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
groupedOutlinedPrimary → use .MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
groupedOutlinedSecondary → use .MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped
groupedContained → use .MuiButtonGroup-contained > .MuiButtonGroup-grouped
groupedContainedHorizontal → use .MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
groupedContainedVertical → use .MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
groupedContainedPrimary → use .MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
groupedContainedSecondary → use .MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the root override instead:

 const theme = createTheme({
   components: {
     MuiButtonGroup: {
       styleOverrides: {
-        groupedContainedPrimary: { borderColor: 'red' },
+        root: {
+          variants: [
+            {
+              props: { variant: 'contained', color: 'primary' },
+              style: {
+                '& > .MuiButtonGroup-grouped': { borderColor: 'red' },
+              },
+            },
+          ],
+        },
       },
     },
   },
 });

Copy
CardHeader props

Use the card-header-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/card-header-props <path>

Copy
The following deprecated props have been removed from the CardHeader component:

titleTypographyProps → use slotProps.title
subheaderTypographyProps → use slotProps.subheader
 <CardHeader
-  titleTypographyProps={{ className: 'my-title' }}
-  subheaderTypographyProps={{ className: 'my-subheader' }}
+  slotProps={{ title: { className: 'my-title' }, subheader: { className: 'my-subheader' } }}
 />

Copy
Checkbox props

Use the checkbox-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/checkbox-props <path>

Copy
The following deprecated Checkbox props have been removed:

inputProps — use slotProps.input instead
inputRef — use slotProps.input.ref instead
 <Checkbox
-  inputProps={{ 'aria-label': 'Checkbox' }}
-  inputRef={ref}
+  slotProps={{ input: { 'aria-label': 'Checkbox', ref } }}
 />

Copy
Chip CSS classes

Use the chip-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/chip-classes <path>

Copy
The following deprecated Chip CSS classes have been removed:

clickableColorPrimary → use .MuiChip-clickable.MuiChip-colorPrimary
clickableColorSecondary → use .MuiChip-clickable.MuiChip-colorSecondary
deletableColorPrimary → use .MuiChip-deletable.MuiChip-colorPrimary
deletableColorSecondary → use .MuiChip-deletable.MuiChip-colorSecondary
outlinedPrimary → use .MuiChip-outlined.MuiChip-colorPrimary
outlinedSecondary → use .MuiChip-outlined.MuiChip-colorSecondary
filledPrimary → use .MuiChip-filled.MuiChip-colorPrimary
filledSecondary → use .MuiChip-filled.MuiChip-colorSecondary
avatarSmall → use .MuiChip-sizeSmall > .MuiChip-avatar
avatarMedium → use .MuiChip-sizeMedium > .MuiChip-avatar
avatarColorPrimary → use .MuiChip-colorPrimary > .MuiChip-avatar
avatarColorSecondary → use .MuiChip-colorSecondary > .MuiChip-avatar
iconSmall → use .MuiChip-sizeSmall > .MuiChip-icon
iconMedium → use .MuiChip-sizeMedium > .MuiChip-icon
iconColorPrimary → use .MuiChip-colorPrimary > .MuiChip-icon
iconColorSecondary → use .MuiChip-colorSecondary > .MuiChip-icon
labelSmall → use .MuiChip-sizeSmall > .MuiChip-label
labelMedium → use .MuiChip-sizeMedium > .MuiChip-label
deleteIconSmall → use .MuiChip-sizeSmall > .MuiChip-deleteIcon
deleteIconMedium → use .MuiChip-sizeMedium > .MuiChip-deleteIcon
deleteIconColorPrimary → use .MuiChip-colorPrimary > .MuiChip-deleteIcon
deleteIconColorSecondary → use .MuiChip-colorSecondary > .MuiChip-deleteIcon
deleteIconOutlinedColorPrimary → use .MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon
deleteIconOutlinedColorSecondary → use .MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon
deleteIconFilledColorPrimary → use .MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon
deleteIconFilledColorSecondary → use .MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the root override instead. For classes that targeted child elements (avatar, icon, deleteIcon), use CSS child selectors inside the root variants since those are not standalone styled slots. The label slot is a proper styled component and can use variants directly in styleOverrides.label:

 const theme = createTheme({
   components: {
     MuiChip: {
       styleOverrides: {
-        clickableColorPrimary: { boxShadow: 'none' },
-        outlinedPrimary: { borderWidth: 2 },
-        filledSecondary: { opacity: 0.9 },
-        avatarColorPrimary: { color: 'white' },
-        iconSmall: { fontSize: 14 },
-        deleteIconColorPrimary: { color: 'red' },
-        labelSmall: { padding: '0 6px' },
+        root: {
+          variants: [
+            { props: { clickable: true, color: 'primary' }, style: { boxShadow: 'none' } },
+            { props: { variant: 'outlined', color: 'primary' }, style: { borderWidth: 2 } },
+            { props: { variant: 'filled', color: 'secondary' }, style: { opacity: 0.9 } },
+            { props: { color: 'primary' }, style: { '& .MuiChip-avatar': { color: 'white' } } },
+            { props: { size: 'small' }, style: { '& .MuiChip-icon': { fontSize: 14 } } },
+            { props: { color: 'primary' }, style: { '& .MuiChip-deleteIcon': { color: 'red' } } },
+          ],
+        },
+        label: {
+          variants: [
+            { props: { size: 'small' }, style: { padding: '0 6px' } },
+          ],
+        },
       },
     },
   },
 });

Copy
CircularProgress CSS classes

Use the circular-progress-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/circular-progress-classes <path>

Copy
The following deprecated CircularProgress CSS classes have been removed:

circleDeterminate → use .MuiCircularProgress-determinate .MuiCircularProgress-circle
circleIndeterminate → use .MuiCircularProgress-indeterminate .MuiCircularProgress-circle
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the circle override instead:

 const theme = createTheme({
   components: {
     MuiCircularProgress: {
       styleOverrides: {
-        circleDeterminate: { strokeDashoffset: '10px' },
-        circleIndeterminate: { animationDuration: '1.4s' },
+        circle: {
+          variants: [
+            {
+              props: { variant: 'determinate' },
+              style: { strokeDashoffset: '10px' },
+            },
+            {
+              props: { variant: 'indeterminate' },
+              style: { animationDuration: '1.4s' },
+            },
+          ],
+        },
       },
     },
   },
 });

Copy
Dialog CSS classes

Use the dialog-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/dialog-classes <path>

Copy
The following deprecated Dialog CSS classes have been removed:

paperScrollPaper → use .MuiDialog-scrollPaper > .MuiDialog-paper
paperScrollBody → use .MuiDialog-scrollBody > .MuiDialog-paper
If you were using these classes in styleOverrides, use the variants array in the paper slot instead:

 const theme = createTheme({
   components: {
     MuiDialog: {
       styleOverrides: {
-        paperScrollPaper: {
-          maxHeight: '80vh',
-        },
-        paperScrollBody: {
-          verticalAlign: 'bottom',
-        },
+        paper: {
+          variants: [
+            {
+              props: { scroll: 'paper' },
+              style: {
+                maxHeight: '80vh',
+              },
+            },
+            {
+              props: { scroll: 'body' },
+              style: {
+                verticalAlign: 'bottom',
+              },
+            },
+          ],
+        },
       },
     },
   },
 });

Copy
Dialog props

Use the dialog-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/dialog-props <path>

Copy
The following deprecated props have been removed from the Dialog component:

BackdropComponent → use slots.backdrop
BackdropProps → use slotProps.backdrop
PaperProps → use slotProps.paper
TransitionComponent → use slots.transition
TransitionProps → use slotProps.transition
 <Dialog
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ invisible: true }}
-  PaperProps={{ elevation: 3 }}
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ timeout: 500 }}
+  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
+  slotProps={{ backdrop: { invisible: true }, paper: { elevation: 3 }, transition: { timeout: 500 } }}
 />

Copy
Drawer props

Use the drawer-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/drawer-props <path>

Copy
The following deprecated props have been removed from the Drawer component:

BackdropComponent → use slots.backdrop
BackdropProps → use slotProps.backdrop
PaperProps → use slotProps.paper
SlideProps → use slotProps.transition
TransitionComponent → use slots.transition
 <Drawer
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ invisible: true }}
-  PaperProps={{ elevation: 2 }}
-  SlideProps={{ timeout: 500 }}
-  TransitionComponent={CustomTransition}
+  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
+  slotProps={{ backdrop: { invisible: true }, paper: { elevation: 2 }, transition: { timeout: 500 } }}
 />

Copy
Drawer CSS classes

Use the drawer-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/drawer-classes <path>

Copy
The following deprecated classes have been removed:

paperAnchorLeft — combine .MuiDrawer-anchorLeft and .MuiDrawer-paper instead
paperAnchorRight — combine .MuiDrawer-anchorRight and .MuiDrawer-paper instead
paperAnchorTop — combine .MuiDrawer-anchorTop and .MuiDrawer-paper instead
paperAnchorBottom — combine .MuiDrawer-anchorBottom and .MuiDrawer-paper instead
paperAnchorDockedLeft — combine .MuiDrawer-anchorLeft, .MuiDrawer-docked, and .MuiDrawer-paper instead
paperAnchorDockedRight — combine .MuiDrawer-anchorRight, .MuiDrawer-docked, and .MuiDrawer-paper instead
paperAnchorDockedTop — combine .MuiDrawer-anchorTop, .MuiDrawer-docked, and .MuiDrawer-paper instead
paperAnchorDockedBottom — combine .MuiDrawer-anchorBottom, .MuiDrawer-docked, and .MuiDrawer-paper instead
-.MuiDrawer-paperAnchorLeft
+.MuiDrawer-anchorLeft > .MuiDrawer-paper

-.MuiDrawer-paperAnchorDockedLeft
+.MuiDrawer-anchorLeft.MuiDrawer-docked > .MuiDrawer-paper

Copy
Divider props

Use the codemod below to migrate the code as described in the following sections:

npx @mui/codemod@latest deprecations/divider-props <path>

Copy
The deprecated Divider prop has been removed. Use sx={{ opacity: 0.6 }} (or any opacity):

 <Divider
-  light
+  sx={{ opacity: 0.6 }}
 />

Copy
Divider CSS classes

The following deprecated class has been removed:

withChildrenVertical — combine the .MuiDivider-withChildren and .MuiDivider-vertical classes instead
-.MuiDivider-withChildrenVertical
+.MuiDivider-withChildren.MuiDivider-vertical

Copy
FormControlLabel props

Use the form-control-label-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/form-control-label-props <path>

Copy
The following deprecated prop has been removed:

componentsProps — use slotProps instead
 <FormControlLabel
-  componentsProps={{ typography: { fontWeight: 'bold' } }}
+  slotProps={{ typography: { fontWeight: 'bold' } }}
 />

Copy
FilledInput props

Use the filled-input-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/filled-input-props <path>

Copy
The following deprecated FilledInput props have been removed:

components → use slots instead
componentsProps → use slotProps instead
 <FilledInput
-  components={{ Root: CustomRoot, Input: CustomInput }}
-  componentsProps={{ root: { id: 'root' }, input: { id: 'input' } }}
+  slots={{ root: CustomRoot, input: CustomInput }}
+  slotProps={{ root: { id: 'root' }, input: { id: 'input' } }}
 />

Copy
ImageListItemBar CSS classes

Use the image-list-item-bar-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/image-list-item-bar-classes <path>

Copy
The following deprecated ImageListItemBar CSS classes have been removed:

titleWrapBelow → use .MuiImageListItemBar-titleWrap with .MuiImageListItemBar-positionBelow on the root
titleWrapActionPosLeft → use .MuiImageListItemBar-titleWrap with .MuiImageListItemBar-actionPositionLeft on the root
titleWrapActionPosRight → use .MuiImageListItemBar-titleWrap with .MuiImageListItemBar-actionPositionRight on the root
actionIconActionPosLeft → use .MuiImageListItemBar-actionIcon with .MuiImageListItemBar-actionPositionLeft on the root
Input props

Use the input-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/input-props <path>

Copy
The following deprecated Input props have been removed:

components → use slots instead
componentsProps → use slotProps instead
 <Input
-  components={{ Root: CustomRoot, Input: CustomInput }}
-  componentsProps={{ root: { id: 'root' }, input: { id: 'input' } }}
+  slots={{ root: CustomRoot, input: CustomInput }}
+  slotProps={{ root: { id: 'root' }, input: { id: 'input' } }}
 />

Copy
InputBase CSS classes

Use the input-base-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/input-base-classes <path>

Copy
The following deprecated InputBase CSS classes have been removed:

inputSizeSmall → use .MuiInputBase-sizeSmall > .MuiInputBase-input
inputMultiline → use .MuiInputBase-multiline > .MuiInputBase-input
inputAdornedStart → use .MuiInputBase-adornedStart > .MuiInputBase-input
inputAdornedEnd → use .MuiInputBase-adornedEnd > .MuiInputBase-input
inputHiddenLabel → use .MuiInputBase-hiddenLabel > .MuiInputBase-input
If you were using these deprecated class names as styleOverrides keys in your theme, use the root slot with combined class selectors instead:

 import { inputBaseClasses } from '@mui/material/InputBase';

 const theme = createTheme({
   components: {
     MuiInputBase: {
       styleOverrides: {
-        inputSizeSmall: { padding: 1 },
-        inputMultiline: { resize: 'none' },
-        inputAdornedStart: { paddingLeft: 0 },
-        inputAdornedEnd: { paddingRight: 0 },
-        inputHiddenLabel: { paddingTop: 8 },
+        root: {
+          [`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`]: { padding: 1 },
+          [`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`]: { resize: 'none' },
+          [`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`]: { paddingLeft: 0 },
+          [`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`]: { paddingRight: 0 },
+          [`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`]: { paddingTop: 8 },
+        },
       },
     },
   },
 });

Copy
InputBase props

Use the input-base-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/input-base-props <path>

Copy
The following deprecated InputBase props have been removed:

components → use slots instead
componentsProps → use slotProps instead
 <InputBase
-  components={{ Root: CustomRoot, Input: CustomInput }}
-  componentsProps={{ root: { id: 'root' }, input: { id: 'input' } }}
+  slots={{ root: CustomRoot, input: CustomInput }}
+  slotProps={{ root: { id: 'root' }, input: { id: 'input' } }}
 />

Copy
LinearProgress CSS classes

Use the linear-progress-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/linear-progress-classes <path>

Copy
The following deprecated LinearProgress CSS classes have been removed:

bar1Buffer → use .MuiLinearProgress-buffer > .MuiLinearProgress-bar1
bar1Determinate → use .MuiLinearProgress-determinate > .MuiLinearProgress-bar1
bar1Indeterminate → use .MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
bar2Buffer → use .MuiLinearProgress-buffer > .MuiLinearProgress-bar2
bar2Indeterminate → use .MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
barColorPrimary → use .MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
barColorSecondary → use .MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
dashedColorPrimary → use .MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
dashedColorSecondary → use .MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the appropriate slot override instead:

 const theme = createTheme({
   components: {
     MuiLinearProgress: {
       styleOverrides: {
-        bar1Determinate: { transition: 'none' },
-        bar1Indeterminate: { width: 'auto' },
-        bar1Buffer: { zIndex: 1 },
-        barColorPrimary: { backgroundColor: 'red' },
-        dashedColorPrimary: { backgroundSize: '10px 10px' },
+        bar1: {
+          variants: [
+            { props: { variant: 'determinate' }, style: { transition: 'none' } },
+            { props: { variant: 'indeterminate' }, style: { width: 'auto' } },
+            { props: { variant: 'buffer' }, style: { zIndex: 1 } },
+          ],
+        },
+        bar: {
+          variants: [
+            { props: { color: 'primary' }, style: { backgroundColor: 'red' } },
+          ],
+        },
+        dashed: {
+          variants: [
+            { props: { color: 'primary' }, style: { backgroundSize: '10px 10px' } },
+          ],
+        },
       },
     },
   },
 });

Copy
ListItem props

Use the list-item-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/list-item-props <path>

Copy
The following deprecated props have been removed:

components — use slots instead
componentsProps — use slotProps instead
ContainerComponent — use component or slots.root instead
ContainerProps — use slotProps.root instead
 <ListItem
-  components={{ Root: CustomRoot }}
-  componentsProps={{ root: { className: 'custom' } }}
+  slots={{ root: CustomRoot }}
+  slotProps={{ root: { className: 'custom' } }}
 />

Copy
The theming styleOverrides key secondaryAction now targets the secondaryAction slot instead of the root slot.

 const theme = createTheme({
   components: {
     MuiListItem: {
       styleOverrides: {
-        secondaryAction: {
-          [`& .${listItemClasses.secondaryAction}`]: {
-            // styles
-          },
-        },
+        secondaryAction: {
+          // styles applied directly to the secondaryAction slot
+        },
       },
     },
   },
 });

Copy
ListItemText props

Use the list-item-text-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/list-item-text-props <path>

Copy
The following deprecated props have been removed:

primaryTypographyProps — use slotProps.primary instead
secondaryTypographyProps — use slotProps.secondary instead
 <ListItemText
-  primaryTypographyProps={{ variant: 'h6' }}
-  secondaryTypographyProps={{ color: 'textSecondary' }}
+  slotProps={{
+    primary: { variant: 'h6' },
+    secondary: { color: 'textSecondary' },
+  }}
 />

Copy
Menu props

Use the menu-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/menu-props <path>

Copy
The following deprecated props have been removed:

MenuListProps — use slotProps.list instead
PaperProps — use slotProps.paper instead
TransitionProps — use slotProps.transition instead
 <Menu
-  MenuListProps={{ disablePadding: true }}
-  PaperProps={{ elevation: 12 }}
-  TransitionProps={{ timeout: 500 }}
+  slotProps={{
+    list: { disablePadding: true },
+    paper: { elevation: 12 },
+    transition: { timeout: 500 },
+  }}
 />

Copy
If you pass these props via Select's MenuProps, update them the same way:

 <Select
   MenuProps={{
-    PaperProps: { style: { maxHeight: 200 } },
-    MenuListProps: { disablePadding: true },
-    TransitionProps: { timeout: 500 },
+    slotProps: {
+      paper: { style: { maxHeight: 200 } },
+      list: { disablePadding: true },
+      transition: { timeout: 500 },
+    },
   }}
 />

Copy
MobileStepper props

Use the mobile-stepper-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/mobile-stepper-props <path>

Copy
The following deprecated props have been removed:

LinearProgressProps — use slotProps.progress instead
 <MobileStepper
-  LinearProgressProps={{ className: 'progress' }}
+  slotProps={{ progress: { className: 'progress' } }}
 />

Copy
Modal props

Use the modal-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/modal-props <path>

Copy
The following deprecated props have been removed from the Modal component:

BackdropComponent → use slots.backdrop
BackdropProps → use slotProps.backdrop
components → use slots
componentsProps → use slotProps
 <Modal
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ invisible: true }}
-  components={{ Root: CustomRoot }}
-  componentsProps={{ root: { className: 'custom' } }}
+  slots={{ backdrop: CustomBackdrop, root: CustomRoot }}
+  slotProps={{ backdrop: { invisible: true }, root: { className: 'custom' } }}
 />

Copy
OutlinedInput props

Use the outlined-input-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/outlined-input-props <path>

Copy
The following deprecated OutlinedInput props have been removed:

components → use slots instead
componentsProps → use slotProps instead
 <OutlinedInput
-  components={{ Root: CustomRoot, Input: CustomInput }}
-  componentsProps={{ root: { id: 'root' }, input: { id: 'input' } }}
+  slots={{ root: CustomRoot, input: CustomInput }}
+  slotProps={{ root: { id: 'root' }, input: { id: 'input' } }}
 />

Copy
PaginationItem props

Use the pagination-item-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/pagination-item-props <path>

Copy
The following deprecated props have been removed:

components — use slots instead
 <PaginationItem
-  components={{
-    first: MyFirstIcon,
-    last: MyLastIcon,
-    previous: MyPreviousIcon,
-    next: MyNextIcon,
-  }}
+  slots={{
+    first: MyFirstIcon,
+    last: MyLastIcon,
+    previous: MyPreviousIcon,
+    next: MyNextIcon,
+  }}
 />

Copy
PaginationItem CSS classes

Use the pagination-item-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/pagination-item-classes <path>

Copy
The following deprecated classes have been removed:

textPrimary — combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead
textSecondary — combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead
outlinedPrimary — combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead
outlinedSecondary — combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead
-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-colorPrimary

-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary

Copy
Popper props

Use the popper-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/popper-props <path>

Copy
The following deprecated props have been removed:

components — use slots instead
componentsProps — use slotProps instead
 <Popper
-  components={{ Root: CustomRoot }}
-  componentsProps={{ root: { className: 'custom' } }}
+  slots={{ root: CustomRoot }}
+  slotProps={{ root: { className: 'custom' } }}
 />

Copy
Popover props

Use the popover-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/popover-props <path>

Copy
The following deprecated props have been removed:

BackdropComponent — use slots.backdrop instead
BackdropProps — use slotProps.backdrop instead
PaperProps — use slotProps.paper instead
TransitionComponent — use slots.transition instead
TransitionProps — use slotProps.transition instead
 <Popover
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ invisible: true }}
-  PaperProps={{ elevation: 12 }}
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ timeout: 500 }}
+  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
+  slotProps={{
+    backdrop: { invisible: true },
+    paper: { elevation: 12 },
+    transition: { timeout: 500 },
+  }}
 />

Copy
Radio props

Use the radio-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/radio-props <path>

Copy
The following deprecated Radio props have been removed:

inputProps — use slotProps.input instead
inputRef — use slotProps.input.ref instead
 <Radio
-  inputProps={{ 'aria-label': 'Radio' }}
-  inputRef={ref}
+  slotProps={{ input: { 'aria-label': 'Radio', ref } }}
 />

Copy
Rating props

Use the rating-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/rating-props <path>

Copy
The following deprecated prop has been removed:

IconContainerComponent — use slotProps.icon.component instead
 <Rating
-  IconContainerComponent={CustomIconContainer}
+  slotProps={{ icon: { component: CustomIconContainer } }}
 />

Copy
Select CSS classes

Use the select-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/select-classes <path>

Copy
The following deprecated Select CSS classes have been removed:

iconFilled → use .MuiSelect-filled ~ .MuiSelect-icon
iconOutlined → use .MuiSelect-outlined ~ .MuiSelect-icon
iconStandard → use .MuiSelect-standard ~ .MuiSelect-icon
If you were using these deprecated class names as styleOverrides in your theme, use sibling selectors in the root override instead:

 import { selectClasses } from '@mui/material/Select';

 const theme = createTheme({
   components: {
     MuiSelect: {
       styleOverrides: {
         root: {
-          [`& .${selectClasses.iconFilled}`]: {
+          [`& .${selectClasses.filled} ~ .${selectClasses.icon}`]: {
             color: 'red',
           },
-          [`& .${selectClasses.iconOutlined}`]: {
+          [`& .${selectClasses.outlined} ~ .${selectClasses.icon}`]: {
             color: 'red',
           },
-          [`& .${selectClasses.iconStandard}`]: {
+          [`& .${selectClasses.standard} ~ .${selectClasses.icon}`]: {
             color: 'red',
           },
         },
       },
     },
   },
 });

Copy
Slider props

Use the slider-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/slider-props <path>

Copy
The following deprecated props have been removed from the Slider component:

components — use slots instead
componentsProps — use slotProps instead
 <Slider
-  components={{ Track: CustomTrack }}
-  componentsProps={{ track: { testid: 'test-id' } }}
+  slots={{ track: CustomTrack }}
+  slotProps={{ track: { testid: 'test-id' } }}
 />

Copy
Slider CSS classes

Use the slider-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/slider-classes <path>

Copy
The following deprecated classes have been removed:

thumbColorPrimary — use .MuiSlider-colorPrimary > .MuiSlider-thumb instead
thumbColorSecondary — use .MuiSlider-colorSecondary > .MuiSlider-thumb instead
thumbColorError — use .MuiSlider-colorError > .MuiSlider-thumb instead
thumbColorInfo — use .MuiSlider-colorInfo > .MuiSlider-thumb instead
thumbColorSuccess — use .MuiSlider-colorSuccess > .MuiSlider-thumb instead
thumbColorWarning — use .MuiSlider-colorWarning > .MuiSlider-thumb instead
thumbSizeSmall — use .MuiSlider-sizeSmall > .MuiSlider-thumb instead
-.MuiSlider-thumbColorPrimary
+.MuiSlider-colorPrimary > .MuiSlider-thumb

-.MuiSlider-thumbColorSecondary
+.MuiSlider-colorSecondary > .MuiSlider-thumb

-.MuiSlider-thumbSizeSmall
+.MuiSlider-sizeSmall > .MuiSlider-thumb

Copy
Snackbar props

Use the snackbar-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/snackbar-props <path>

Copy
The following deprecated Snackbar props have been removed:

ClickAwayListenerProps — use slotProps.clickAwayListener instead
ContentProps — use slotProps.content instead
TransitionComponent — use slots.transition instead
TransitionProps — use slotProps.transition instead
 <Snackbar
-  ClickAwayListenerProps={CustomClickAwayListenerProps}
-  ContentProps={CustomContentProps}
-  TransitionComponent={CustomTransition}
-  TransitionProps={CustomTransitionProps}
+  slots={{ transition: CustomTransition }}
+  slotProps={{
+    clickAwayListener: CustomClickAwayListenerProps,
+    content: CustomContentProps,
+    transition: CustomTransitionProps,
+  }}
 />

Copy
StepConnector CSS classes

Use the step-connector-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/step-connector-classes <path>

Copy
The following deprecated StepConnector CSS classes have been removed:

lineHorizontal → use .MuiStepConnector-horizontal .MuiStepConnector-line
lineVertical → use .MuiStepConnector-vertical .MuiStepConnector-line
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the line override instead:

 const theme = createTheme({
   components: {
     MuiStepConnector: {
       styleOverrides: {
-        lineHorizontal: { borderTopWidth: 3 },
-        lineVertical: { borderLeftWidth: 3 },
+        line: {
+          variants: [
+            { props: { orientation: 'horizontal' }, style: { borderTopWidth: 3 } },
+            { props: { orientation: 'vertical' }, style: { borderLeftWidth: 3 } },
+          ],
+        },
       },
     },
   },
 });

Copy
StepContent props

Use the step-content-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/step-content-props <path>

Copy
The following deprecated StepContent props have been removed:

TransitionComponent → use slots.transition instead
TransitionProps → use slotProps.transition instead
 <StepContent
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ unmountOnExit: true }}
+  slots={{ transition: CustomTransition }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

Copy
StepLabel props

Use the step-label-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/step-label-props <path>

Copy
The following deprecated StepLabel props have been removed:

componentsProps → use slotProps instead
StepIconComponent → use slots.stepIcon instead
StepIconProps → use slotProps.stepIcon instead
 <StepLabel
-  StepIconComponent={CustomIcon}
-  StepIconProps={{ error: true }}
-  componentsProps={{ label: { className: 'my-label' } }}
+  slots={{ stepIcon: CustomIcon }}
+  slotProps={{ stepIcon: { error: true }, label: { className: 'my-label' } }}
 />

Copy
SpeedDial props

Use the speed-dial-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/speed-dial-props <path>

Copy
The deprecated SpeedDial props have been removed. Use the slots and slotProps props instead:

 <SpeedDial
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ timeout: 500 }}
+  slots={{ transition: CustomTransition }}
+  slotProps={{ transition: { timeout: 500 } }}
 >

Copy
SpeedDialAction props

Use the speed-dial-action-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/speed-dial-action-props <path>

Copy
The deprecated SpeedDialAction props have been removed. Use the slotProps prop instead:

 <SpeedDialAction
-  FabProps={{ size: 'large' }}
-  tooltipTitle="Add"
-  tooltipPlacement="right"
-  tooltipOpen
-  TooltipClasses={{ tooltip: 'custom' }}
+  slotProps={{
+    fab: { size: 'large' },
+    tooltip: {
+      title: 'Add',
+      placement: 'right',
+      open: true,
+      classes: { tooltip: 'custom' },
+    },

Copy
Switch props

Use the switch-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/switch-props <path>

Copy
The following deprecated Switch props have been removed:

inputProps — use slotProps.input instead
inputRef — use slotProps.input.ref instead
 <Switch
-  inputProps={{ 'aria-label': 'Switch' }}
-  inputRef={ref}
+  slotProps={{ input: { 'aria-label': 'Switch', ref } }}
 />

Copy
SwipeableDrawer props

Use the drawer-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/drawer-props <path>

Copy
The following deprecated props have been removed from the SwipeableDrawer component:

BackdropComponent → use slots.backdrop
BackdropProps → use slotProps.backdrop
SwipeAreaProps → use slotProps.swipeArea
 <SwipeableDrawer
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ invisible: true }}
-  SwipeAreaProps={{ className: 'custom' }}
+  slots={{ backdrop: CustomBackdrop }}
+  slotProps={{ backdrop: { invisible: true }, swipeArea: { className: 'custom' } }}
 />

Copy
TablePagination props

Use the table-pagination-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/table-pagination-props <path>

Copy
The following deprecated props have been removed:

backIconButtonProps — use slotProps.actions.previousButton instead
nextIconButtonProps — use slotProps.actions.nextButton instead
SelectProps — use slotProps.select instead
 <TablePagination
-  backIconButtonProps={{ disabled: true }}
-  nextIconButtonProps={{ disabled: true }}
-  SelectProps={{ variant: 'outlined' }}
+  slotProps={{
+    actions: {
+      previousButton: { disabled: true },
+      nextButton: { disabled: true },
+    },
+    select: { variant: 'outlined' },
+  }}
 />

Copy
TableSortLabel CSS classes

Use the table-sort-label-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/table-sort-label-classes <path>

Copy
The following deprecated classes have been removed:

iconDirectionDesc — combine the .MuiTableSortLabel-directionDesc and .MuiTableSortLabel-icon classes instead
iconDirectionAsc — combine the .MuiTableSortLabel-directionAsc and .MuiTableSortLabel-icon classes instead
-.MuiTableSortLabel-iconDirectionDesc
+.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon

-.MuiTableSortLabel-iconDirectionAsc
+.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon

Copy
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the icon override instead:

 const theme = createTheme({
   components: {
     MuiTableSortLabel: {
       styleOverrides: {
-        iconDirectionDesc: { opacity: 1 },
-        iconDirectionAsc: { opacity: 1 },
+        icon: {
+          variants: [
+            { props: { direction: 'desc' }, style: { opacity: 1 } },
+            { props: { direction: 'asc' }, style: { opacity: 1 } },
+          ],
+        },
       },
     },
   },
 });

Copy
Tabs props

Use the tabs-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/tabs-props <path>

Copy
The following deprecated props have been removed:

ScrollButtonComponent — use slots.scrollButtons instead
TabIndicatorProps — use slotProps.indicator instead
TabScrollButtonProps — use slotProps.scrollButtons instead
slots.StartScrollButtonIcon — use slots.startScrollButtonIcon instead
slots.EndScrollButtonIcon — use slots.endScrollButtonIcon instead
 <Tabs
-  ScrollButtonComponent={CustomScrollButton}
-  TabIndicatorProps={{ style: { backgroundColor: 'green' } }}
-  TabScrollButtonProps={{ disableRipple: true }}
+  slots={{ scrollButtons: CustomScrollButton }}
+  slotProps={{
+    indicator: { style: { backgroundColor: 'green' } },
+    scrollButtons: { disableRipple: true },
+  }}
 />

Copy
 <Tabs
-  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
+  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
 />

Copy
Tab CSS classes

Use the tab-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/tab-classes <path>

Copy
The following deprecated class has been removed:

iconWrapper — use the icon class instead
-.MuiTab-iconWrapper
+.MuiTab-icon

Copy
Tabs CSS classes

The following deprecated classes have been removed:

flexContainer — use the list class instead
flexContainerVertical — combine the list and vertical classes instead
-.MuiTabs-flexContainer
+.MuiTabs-list

-.MuiTabs-flexContainerVertical
+.MuiTabs-list.MuiTabs-vertical

Copy
ToggleButtonGroup CSS classes

Use the toggle-button-group-classes codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>

Copy
The following deprecated ToggleButtonGroup CSS classes have been removed:

groupedHorizontal → use .MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
groupedVertical → use .MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
If you were using these deprecated class names as styleOverrides keys in your theme, use the variants array in the grouped override instead:

 const theme = createTheme({
   components: {
     MuiToggleButtonGroup: {
       styleOverrides: {
-        groupedHorizontal: { borderRadius: 0 },
-        groupedVertical: { borderRadius: 0 },
+        grouped: {
+          variants: [
+            { props: { orientation: 'horizontal' }, style: { borderRadius: 0 } },
+            { props: { orientation: 'vertical' }, style: { borderRadius: 0 } },
+          ],
+        },
       },
     },
   },
 });

Copy
TextField props

Use the text-field-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/text-field-props <path>

Copy
The following deprecated props have been removed from the TextField component:

InputProps → use slotProps.input
inputProps → use slotProps.htmlInput
SelectProps → use slotProps.select
InputLabelProps → use slotProps.inputLabel
FormHelperTextProps → use slotProps.formHelperText
 <TextField
-  InputProps={CustomInputProps}
-  inputProps={CustomHtmlInputProps}
-  SelectProps={CustomSelectProps}
-  InputLabelProps={CustomInputLabelProps}
-  FormHelperTextProps={CustomFormHelperTextProps}
+  slotProps={{
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperTextProps,
+  }}
 />

Copy
Use the autocomplete-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/autocomplete-props <path>

Copy
If you render a TextField from Autocomplete, the params shape also changed to match the new TextField API:

 <Autocomplete
   renderInput={(params) => (
     <TextField
       {...params}
-      inputProps={{
-        ...params.inputProps,
-        autoComplete: 'new-password',
+      slotProps={{
+        ...params.slotProps,
+        htmlInput: {
+          ...params.slotProps.htmlInput,
+          autoComplete: 'new-password',
+        },
       }}
     />
   )}

Copy
Tooltip props

Use the tooltip-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/tooltip-props <path>

Copy
The following deprecated props have been removed from the Tooltip component:

components → use slots
componentsProps → use slotProps
PopperComponent → use slots.popper
PopperProps → use slotProps.popper
TransitionComponent → use slots.transition
TransitionProps → use slotProps.transition
 <Tooltip
   title="Hello World"
-  components={{ Popper: CustomPopper, Tooltip: CustomTooltip, Transition: CustomTransition, Arrow: CustomArrow }}
-  componentsProps={{ popper: { placement: 'top' }, tooltip: { className: 'custom' }, arrow: { className: 'arrow' } }}
-  PopperComponent={CustomPopper}
-  PopperProps={{ disablePortal: true }}
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ timeout: 500 }}
+  slots={{ popper: CustomPopper, tooltip: CustomTooltip, transition: CustomTransition, arrow: CustomArrow }}
+  slotProps={{
+    popper: { placement: 'top', disablePortal: true },
+    tooltip: { className: 'custom' },
+    transition: { timeout: 500 },
+    arrow: { className: 'arrow' },
+  }}
 />

Copy
Typography CSS classes

The deprecated paragraph CSS class has been removed. Use CSS .MuiTypography-root:where(p) to apply custom styles for the paragraph element instead:

-.MuiTypography-paragraph {
-  margin-bottom: 16px;
-}
+.MuiTypography-root:where(p) {
+  margin-bottom: 16px;
+}

Copy
Typography props

Use the typography-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest deprecations/typography-props <path>

Copy
The following deprecated props have been removed from the Typography component:

paragraph → use the sx prop to add a margin bottom instead
-<Typography paragraph />
+<Typography sx={{ marginBottom: '16px' }} />

Copy
System props

Use the system-props codemod below to migrate the code as described in the following section:

npx @mui/codemod@latest v9.0.0/system-props <path/to/folder>

Copy
The deprecated system props have been removed from the following components:

Box
DialogContentText
Grid
Link
Stack
Typography
TimelineContent
TimelineOppositeContent
-<Box mt={2} color="primary.main" />
+<Box sx={{ mt: 2, color: 'primary.main' }} />

-<DialogContentText mt={2} color="text.secondary" />
+<DialogContentText sx={{ mt: 2, color: 'text.secondary' }} />

-<Grid mt={2} mr={1} />
+<Grid sx={{ mt: 2, mr: 1 }} />

-<Link mt={2} color="text.secondary" />
+<Link sx={{ mt: 2, color: 'text.secondary' }} />

-<Stack mt={2} alignItems="center" />
+<Stack sx={{ mt: 2, alignItems: 'center' }} />

-<Typography mt={2} fontWeight="bold" />
+<Typography sx={{ mt: 2, fontWeight: 'bold' }} />

-<TimelineContent mt={2} color="text.secondary" />
+<TimelineContent sx={{ mt: 2, color: 'text.secondary' }} />

-<TimelineOppositeContent mt={2} color="text.secondary" />
+<TimelineOppositeContent sx={{ mt: 2, color: 'text.secondary' }} />

Copy
This also fixes an issue where props like color were consumed by the component instead of being forwarded to the element rendered via the component prop:

// `color` is now correctly forwarded to Button
<Grid component={Button} color="secondary" variant="contained">
  hello
</Grid>

Copy
Was this page helpful?

•

Blog
•

Store
Contents

Why you should upgrade to Material UI v9
Improved accessibility and platform alignment
Quality-of-life improvements
Supported browsers and versions
Breaking changes
Autocomplete
Backdrop
ButtonBase
Dialog & Modal
GridLegacy
List
Material Icons
Menu and MenuList
Slider
Stepper, Step and StepButton
TablePagination numbers are formatted by default
Tabs
TextField
Theme
jsdom support
Deprecated APIs removed (Breaking)
Accordion props
AccordionSummary CSS classes
Alert CSS classes
Alert props
Avatar props
AvatarGroup props
Autocomplete props
useAutocomplete fields
Backdrop props
Badge props
Button CSS classes
ButtonGroup CSS classes
CardHeader props
Checkbox props
Chip CSS classes
CircularProgress CSS classes
Dialog CSS classes
Dialog props
Drawer props
Drawer CSS classes
Divider props
Divider CSS classes
FormControlLabel props
FilledInput props
ImageListItemBar CSS classes
Input props
InputBase CSS classes
InputBase props
LinearProgress CSS classes
ListItem props
ListItemText props
Menu props
MobileStepper props
Modal props
OutlinedInput props
PaginationItem props
PaginationItem CSS classes
Popper props
Popover props
Radio props
Rating props
Select CSS classes
Slider props
Slider CSS classes
Snackbar props
StepConnector CSS classes
StepContent props
StepLabel props
SpeedDial props
SpeedDialAction props
Switch props
SwipeableDrawer props
TablePagination props
TableSortLabel CSS classes
Tabs props
Tab CSS classes
Tabs CSS classes
ToggleButtonGroup CSS classes
TextField props
Tooltip props
Typography CSS classes
Typography props
System props
doit
formengine
Become a Diamond sponsor
MUI stands in solidarity with Ukraine.
Upgrade to v9 - Material UI
Cookie Preferences