Migrating from deprecated APIs

Learn how to migrate away from recently deprecated APIs before they become breaking changes.

Why you should migrate

Features become deprecated over time as maintainers make improvements to the APIs. Migrating to these improved APIs results in a better developer experience, so it's in your best interest to stay up to date. Deprecated APIs often become breaking changes in subsequent major versions, so the sooner you migrate, the smoother the next major update will be.

Migrating

Material UI provides the deprecations/all codemod to help you stay up to date with minimal effort.

npx @mui/codemod@latest deprecations/all <path>

This command runs all the current deprecations codemods, automatically migrating to the updated API. You can run this codemod as often as necessary to keep up with the latest changes.

:::info

If you need to manually migrate from a deprecated API, you can find examples below for all deprecations that have been added in Material UI v5. If you need to run a specific codemod, those are also linked below.

:::

Package-wide deprecated APIs

Inner element overrides

The slots and slotProps APIs are in the process of being standardized. The analogous APIs—components, componentsProps, <SlotName>Component, and <SlotName>Props—are going to be deprecated and eventually removed. This improves the developer experience through consistency, predictability, and reduced cognitive load.

Composed CSS classes

The composed CSS classes are going to be deprecated and eventually removed in favor of atomic class alternatives. For example, the .MuiAccordionSummary-contentGutters class was deprecated in favor of the .MuiAccordionSummary-gutters and .MuiAccordionSummary-content classes. This improves the developer experience by reducing bloat and cognitive load.

System props

MUI System props (such as mt={*}, bgcolor={*}, and more) have been deprecated in the Box, Typography, Link, Grid, and Stack components. Use the codemod below to move all System props to the sx prop:

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

You can also manually update your components as shown in the snippet below:

-<Button mr={2}>
+<Button sx={{ mr: 2 }}>

The sx prop supports all features of system props: callbacks with access to the theme, responsive values, direct access to theme values, shorthands, etc.

Theme component variants

Custom component variants defined in the theme are now merged with the theme style overrides, defined within the root slot of the component.

Use this codemod to update your project's theme file:

npx @mui/codemod@latest v6.0.0/theme-v6 <path/to/theme>

You can also manually update your theme as shown in the snippet below:

 createTheme({
   components: {
     MuiButton: {
-      variants: [ ... ],
+      styleOverrides: {
+        root: {
+          variants: [ ... ],
+        },
+      },
     },
   },
 });

This reduces the API surface and lets you define variants in other slots of the component.

Accordion

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

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

TransitionComponent

The Accordion's TransitionComponent prop was deprecated in favor of slots.transition:

 <Accordion
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}
 />

TransitionProps

The Accordion's TransitionProps prop was deprecated in favor of slotProps.transition:

 <Accordion
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

AccordionSummary

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

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

.MuiAccordionSummary-contentGutters

The AccordionSummary's .MuiAccordionSummary-contentGutters class was deprecated in favor of the .MuiAccordionSummary-gutters and .MuiAccordionSummary-content classes. Bear in mind that the .MuiAccordionSummary-gutters class is applied to the component's root, whereas the .MuiAccordionSummary-contentGutters and .MuiAccordionSummary-content classes are applied to the content element.

-.MuiAccordionSummary-root .MuiAccordionSummary-contentGutters
+.MuiAccordionSummary-root.MuiAccordionSummary-gutters .MuiAccordionSummary-content

 import { accordionSummaryClasses } from '@mui/material/AccordionSummary';

 MuiAccordionSummary: {
   styleOverrides: {
     root: {
-      [`& .${accordionSummaryClasses.contentGutters}`]: {
+      [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
         color: 'red',
       },
     },
   },
 },

Alert

Use the alert-props and alert-classes codemods below to migrate the code as described in the following sections:

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

components

The Alert's components prop was deprecated in favor of slots:

 <Alert
-  components={{ CloseButton: CustomButton }}
+  slots={{ closeButton: CustomButton }}
 />

componentsProps

The Alert's componentsProps prop was deprecated in favor of slotProps:

 <Alert
-  componentsProps={{ closeButton: { id: 'close-id' } }}
+  slotProps={{ closeButton: { id: 'close-id' } }}
 />

Composed CSS classes

The CSS classes that composed the severity (or variant) and color prop values were removed.

Here's how to migrate:

-.MuiAlert-standardSuccess
+.MuiAlert-standard.MuiAlert-colorSuccess
-.MuiAlert-standardInfo
+.MuiAlert-standard.MuiAlert-colorInfo
-.MuiAlert-standardWarning
+.MuiAlert-standard.MuiAlert-colorWarning
-.MuiAlert-standardError
+.MuiAlert-standard.MuiAlert-colorError
-.MuiAlert-outlinedSuccess
+.MuiAlert-outlined.MuiAlert-colorSuccess
-.MuiAlert-outlinedInfo
+.MuiAlert-outlined.MuiAlert-colorInfo
-.MuiAlert-outlinedWarning
+.MuiAlert-outlined.MuiAlert-colorWarning
-.MuiAlert-outlinedError
+.MuiAlert-outlined.MuiAlert-colorError
-.MuiAlert-filledSuccess
+.MuiAlert-filled.MuiAlert-colorSuccess
-.MuiAlert-filledInfo
+.MuiAlert-filled.MuiAlert-colorInfo
-.MuiAlert-filledWarning
+.MuiAlert-filled.MuiAlert-colorWarning
-.MuiAlert-filledError
+.MuiAlert-filled.MuiAlert-colorError

 import { alertClasses } from '@mui/material/Alert';

 MuiAlert: {
   styleOverrides: {
     root: {
-      [`&.${alertClasses.standardSuccess}`]: {
+      [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.standardInfo}`]: {
+      [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.standardWarning}`]: {
+      [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.standardError}`]: {
+      [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.outlinedSuccess}`]: {
+      [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.outlinedInfo}`]: {
+      [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.outlinedWarning}`]: {
+      [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.outlinedError}`]: {
+      [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.filledSuccess}`]: {
+      [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.filledInfo}`]: {
+      [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.filledWarning}`]: {
+      [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${alertClasses.filledError}`]: {
+      [`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
         color: 'red',
       },
     },
   },
 },

Autocomplete

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

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

*Component props

All of the Autocomplete's slot (*Component) props were deprecated in favor of equivalent slots and slotProps entries:

 <Autocomplete
-    PaperComponent={CustomPaperComponent}
-    PopperComponent={CustomPopperComponent}
-    ListboxComponent={CustomListboxComponent}
+    slots={{
+        paper: CustomPaperComponent,
+        popper: CustomPopperComponent,
+    }}
+    slotProps={{
+        listbox: {
+            component: CustomListboxComponent,
+        },
+    }}
 />

:::warning The listbox slot is a special case because ListboxComponent was implemented differently from the other *Component props, behaving similar to the component and as props. The slots.listbox entry exists and you can use it to replace the component entirely, but if you want to keep ListboxComponent's behavior which maintains the original listbox styles, you should use the slotProps.listbox.component entry. :::

*Props props

All of the Autocomplete's slot props (*Props) props were deprecated in favor of equivalent slotProps entries:

 <Autocomplete
-    ChipProps={CustomChipProps}
-    ListboxProps={CustomListboxProps}
+    slotProps={{
+        chip: CustomChipProps,
+        listbox: CustomListboxProps,
+    }}
 />

componentsProps

The Autocomplete's componentsProps prop was deprecated in favor of slotProps:

 <Autocomplete
-  componentsProps={{
-    clearIndicator: { width: 10 },
-    paper: { width: 12 },
-    popper: { width: 14 },
-    popupIndicator: { width: 16 },
+  slotProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
   }}
 />

Avatar

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

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

imgProps

The Avatar's imgProps prop was deprecated in favor of slotProps.img:

 <Avatar
-  imgProps={{
-    onError: () => {},
-    onLoad: () => {},
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
   }}
 />;

AvatarGroup

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

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

slotProps.additionalAvatar

The AvatarGroup's slotProps.additionalAvatar was deprecated in favor of slotProps.surplus:

 <AvatarGroup
   slotProps={{
-    additionalAvatar: { color: 'red' },
+    surplus: { color: 'red' },
   }}
 >

 MuiAvatarGroup: {
   defaultProps: {
     slotProps: {
-      additionalAvatar: { color: 'red' },
+      surplus: { color: 'red' },
     },
   },
 },

componentsProps

The AvatarGroup's componentsProps was deprecated in favor of slotProps:

 <AvatarGroup
-  componentsProps={{
-    additionalAvatar: { color: 'red' },
+  slotProps={{
+    surplus: { color: 'red' },
   }}
 >

 MuiAvatarGroup: {
   defaultProps: {
-    componentsProps: {
-      additionalAvatar: { color: 'red' },
+    slotProps: {
+      surplus: { color: 'red' },
     },
   },
 },

Backdrop

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

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

components

The Backdrop's components prop was deprecated in favor of slots:

 <Backdrop
-  components={{ root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

The Backdrop's componentsProps prop was deprecated in favor of slotProps:

 <Backdrop
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

TransitionComponent

The Backdrop's TransitionComponent prop was deprecated in favor of slots.transition:

 <Slider
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}

Badge

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

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

components

The Badge's components prop was deprecated in favor of slots:

 <Badge
-  components={{ root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 >

componentsProps

The Badge's componentsProps prop was deprecated in favor of slotProps:

 <Badge
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 >

Button

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

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

Composed CSS classes

The CSS classes composing the variant and color prop values, as well as those composing the variant and size prop values, along with the icon size CSS classes, have been removed.

Here's how to migrate:

-.MuiButton-textInherit
+.MuiButton-text.MuiButton-colorInherit
-.MuiButton-textPrimary
+.MuiButton-text.MuiButton-colorPrimary
-.MuiButton-textSecondary
+.MuiButton-text.MuiButton-colorSecondary
-.MuiButton-textSuccess
+.MuiButton-text.MuiButton-colorSuccess
-.MuiButton-textError
+.MuiButton-text.MuiButton-colorError
-.MuiButton-textInfo
+.MuiButton-text.MuiButton-colorInfo
-.MuiButton-textWarning
+.MuiButton-text.MuiButton-colorWarning
-.MuiButton-outlinedInherit
+.MuiButton-outlined.MuiButton-colorInherit
-.MuiButton-outlinedPrimary
+.MuiButton-outlined.MuiButton-colorPrimary
-.MuiButton-outlinedSecondary
+.MuiButton-outlined.MuiButton-colorSecondary
-.MuiButton-outlinedSuccess
+.MuiButton-outlined.MuiButton-colorSuccess
-.MuiButton-outlinedError
+.MuiButton-outlined.MuiButton-colorError
-.MuiButton-outlinedInfo
+.MuiButton-outlined.MuiButton-colorInfo
-.MuiButton-outlinedWarning
+.MuiButton-outlined.MuiButton-colorWarning
-.MuiButton-containedInherit
+.MuiButton-contained.MuiButton-colorInherit
-.MuiButton-containedPrimary
+.MuiButton-contained.MuiButton-colorPrimary
-.MuiButton-containedSecondary
+.MuiButton-contained.MuiButton-colorSecondary
-.MuiButton-containedSuccess
+.MuiButton-contained.MuiButton-colorSuccess
-.MuiButton-containedError
+.MuiButton-contained.MuiButton-colorError
-.MuiButton-containedInfo
+.MuiButton-contained.MuiButton-colorInfo
-.MuiButton-containedWarning
+.MuiButton-contained.MuiButton-colorWarning
-.MuiButton-textSizeSmall
+.MuiButton-text.MuiButton-sizeSmall
-.MuiButton-textSizeMedium
+.MuiButton-text.MuiButton-sizeMedium
-.MuiButton-textSizeLarge
+.MuiButton-text.MuiButton-sizeLarge
-.MuiButton-outlinedSizeSmall
+.MuiButton-outlined.MuiButton-sizeSmall
-.MuiButton-outlinedSizeMedium
+.MuiButton-outlined.MuiButton-sizeMedium
-.MuiButton-outlinedSizeLarge
+.MuiButton-outlined.MuiButton-sizeLarge
-.MuiButton-containedSizeSmall
+.MuiButton-contained.MuiButton-sizeSmall
-.MuiButton-containedSizeMedium
+.MuiButton-contained.MuiButton-sizeMedium
-.MuiButton-containedSizeLarge
+.MuiButton-contained.MuiButton-sizeLarge
-.MuiButton-root .MuiButton-iconSizeSmall
+.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon
-.MuiButton-root .MuiButton-iconSizeMedium
+.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon
-.MuiButton-root .MuiButton-iconSizeLarge
+.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon

 import { buttonClasses } from '@mui/material/Button';

 MuiButton: {
   styleOverrides: {
     root: {
-      [`&.${buttonClasses.textInherit}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textPrimary}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textSecondary}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textSuccess}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textError}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textInfo}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textWarning}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedInherit}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedPrimary}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedSecondary}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedSuccess}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedError}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedInfo}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedWarning}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedInherit}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedPrimary}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedSecondary}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedSuccess}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedError}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedInfo}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedWarning}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedSizeSmall}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedSizeMedium}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.containedSizeLarge}`]: {
+      [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textSizeSmall}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textSizeMedium}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.textSizeLarge}`]: {
+      [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedSizeSmall}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedSizeMedium}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: {
         color: 'red',
       },
-      [`&.${buttonClasses.outlinedSizeLarge}`]: {
+      [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: {
         color: 'red',
       },
-      [`& .${buttonClasses.iconSizeSmall}`]: {
+      [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${buttonClasses.iconSizeMedium}`]: {
+      [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${buttonClasses.iconSizeLarge}`]: {
+      [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: {
         color: 'red',
       },
     },
   },
 },

ButtonGroup

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

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

Composed CSS classes

The CSS classes that composed the following props were deprecated:

orientation | variant and grouped
color, variant and grouped

Here's how to migrate:

-.MuiButtonGroup-root .MuiButtonGroup-groupedHorizontal
+.MuiButtonGroup-root.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedVertical
+.MuiButtonGroup-root.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedText
+.MuiButtonGroup-root.MuiButtonGroup-text > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedTextHorizontal
+.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedTextVertical
+.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedTextPrimary
+.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedTextSecondary
+.MuiButtonGroup-root.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlined
+.MuiButtonGroup-root.MuiButtonGroup-outlined > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedHorizontal
+.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedVertical
+.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedPrimary
+.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedOutlinedSecondary
+.MuiButtonGroup-root.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedContained
+.MuiButtonGroup-root.MuiButtonGroup-contained > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedHorizontal
+.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedVertical
+.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedPrimary
+.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped
-.MuiButtonGroup-root .MuiButtonGroup-groupedContainedSecondary
+.MuiButtonGroup-root.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped

 import { buttonGroupClasses } from '@mui/material/ButtonGroup';

  MuiButtonGroup: {
   styleOverrides: {
     root: {
-      [`& .${buttonGroupClasses.groupedHorizontal}`]: {
+      [`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedVertical}`]: {
+      [`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedText}`]: {
+      [`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedTextHorizontal}`]: {
+      [`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedTextVertical}`]: {
+      [`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedTextPrimary}`]: {
+      [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedTextSecondary}`]: {
+      [`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedOutlined}`]: {
+      [`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedOutlinedHorizontal}`]: {
+      [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedOutlinedVertical}`]: {
+      [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedOutlinedPrimary}`]: {
+      [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedOutlinedSecondary}`]: {
+      [`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedContained}`]: {
+      [`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedContainedHorizontal}`]: {
+      [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedContainedVertical}`]: {
+      [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedContainedPrimary}`]: {
+      [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${buttonGroupClasses.groupedContainedSecondary}`]: {
+      [`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`]: {
          color: 'red',
        },
      },
    },
  },

CardHeader

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

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

titleTypographyProps

The CardHeader's titleTypographyProps props were deprecated in favor of slotProps.title:

 <CardHeader
-  titleTypographyProps={titleTypographyProps}
+  slotProps={{ title: titleTypographyProps }}
 />

subheaderTypographyProps

The CardHeader's subheaderTypographyProps props were deprecated in favor of slotProps.subheader:

 <CardHeader
-  subheaderTypographyProps={subheaderTypographyProps}
+  slotProps={{ subheader: subheaderTypographyProps }}
 />

Chip

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

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

Composed CSS classes

The CSS classes that composed the following props were deprecated:

variant | clickable | deletable and color
avatar and color | size
icon and color | size
deleteIcon and color | size
label and size

Here's how to migrate:

-.MuiChip-clickableColorPrimary
+.MuiChip-clickable.MuiChip-colorPrimary
-.MuiChip-clickableColorSecondary
+.MuiChip-clickable.MuiChip-colorSecondary
-.MuiChip-deletableColorPrimary
+.MuiChip-deletable.MuiChip-colorPrimary
-.MuiChip-deletableColorSecondary
+.MuiChip-deletable.MuiChip-colorSecondary
-.MuiChip-outlinedPrimary
+.MuiChip-outlined.MuiChip-colorPrimary
-.MuiChip-outlinedSecondary
+.MuiChip-outlined.MuiChip-colorSecondary
-.MuiChip-filledPrimary
+.MuiChip-filled.MuiChip-colorPrimary
-.MuiChip-filledSecondary
+.MuiChip-filled.MuiChip-colorSecondary
-.MuiChip-root .MuiChip-avatarSmall
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar
-.MuiChip-root .MuiChip-avatarMedium
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar
-.MuiChip-root .MuiChip-avatarColorPrimary
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar
-.MuiChip-root .MuiChip-avatarColorSecondary
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar
-.MuiChip-root .MuiChip-iconSmall
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon
-.MuiChip-root .MuiChip-iconMedium
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon
-.MuiChip-root .MuiChip-iconColorPrimary
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon
-.MuiChip-root .MuiChip-iconColorSecondary
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon
-.MuiChip-root .MuiChip-labelSmall
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label
-.MuiChip-root .MuiChip-labelMedium
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label
-.MuiChip-root .MuiChip-deleteIconSmall
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconMedium
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconColorPrimary
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconColorSecondary
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary
+.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary
+.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary
+.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon
-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary
+.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon

 import { chipClasses } from '@mui/material/Chip';

 MuiChip: {
   styleOverrides: {
     root: {
-      [`&.${chipClasses.clickableColorPrimary}`]: {
+      [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.clickableColorSecondary}`]: {
+      [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.deletableColorPrimary}`]: {
+      [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.deletableColorSecondary}`]: {
+      [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.outlinedPrimary}`]: {
+      [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.outlinedSecondary}`]: {
+      [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.filledPrimary}`]: {
+      [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${chipClasses.filledSecondary}`]: {
+      [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.avatarSmall}`]: {
+      [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.avatarMedium}`]: {
+      [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.avatarColorPrimary}`]: {
+      [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.avatarColorSecondary}`]: {
+      [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.iconSmall}`]: {
+      [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.iconMedium}`]: {
+      [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.iconColorPrimary}`]: {
+      [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.iconColorSecondary}`]: {
+      [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.labelSmall}`]: {
+      [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.labelMedium}`]: {
+      [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconSmall}`]: {
+      [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconMedium}`]: {
+      [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconColorPrimary}`]: {
+      [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconColorSecondary}`]: {
+      [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: {
+      [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: {
+      [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconFilledColorPrimary}`]: {
+      [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
-      [`& .${chipClasses.deleteIconFilledColorSecondary}`]: {
+      [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
         color: 'red',
       },
     },
   },
 },

CircularProgress

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

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

Composed CSS classes

The CSS classes that composed the circle CSS class and variant prop values were removed.

Here's how to migrate:

-.MuiCircularProgress-circleDeterminate
-.MuiCircularProgress-circleIndeterminate
+.MuiCircularProgress-determinate > .MuiCircularProgress-circle
+.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle

 import { circularProgressClasses } from '@mui/material/CircularProgress';

 MuiCircularProgress: {
   styleOverrides: {
     root: {
-      [`& .${circularProgressClasses.circleDeterminate}`]: {
+      [`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`]: {
         color: 'red',
       },
-      [`& .${circularProgressClasses.circleIndeterminate}`]: {
+      [`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`]: {
         color: 'red',
       },
     },
   },
 },

Divider

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

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

light

The Divider's light prop was deprecated, Use sx={{ opacity : "0.6" }} (or any opacity):

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

Drawer

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

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

Composed CSS classes

The CSS classes that composed the following props were deprecated:

paper and anchor
paper, anchor and docked

Here's how to migrate:

-.MuiDrawer-paperAnchorBottom
+.MuiDrawer-anchorBottom > .MuiDrawer-paper
-.MuiDrawer-paperAnchorLeft
+.MuiDrawer-anchorLeft > .MuiDrawer-paper
-.MuiDrawer-paperAnchorRight
+.MuiDrawer-anchorRight > .MuiDrawer-paper
-.MuiDrawer-paperAnchorTop
+.MuiDrawer-anchorTop > .MuiDrawer-paper
-.MuiDrawer-paperAnchorDockedBottom
+.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper
-.MuiDrawer-paperAnchorDockedLeft
+.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper
-.MuiDrawer-paperAnchorDockedRight
+.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper
-.MuiDrawer-paperAnchorDockedTop
+.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper

 import { drawerClasses } from '@mui/material/Drawer';

 MuiDrawer: {
   styleOverrides: {
     root: {
-      [`.${drawerClasses.paperAnchorBottom}`]: {
+      [`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorLeft}`]: {
+      [`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorRight}`]: {
+      [`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorTop}`]: {
+      [`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorDockedBottom}`]: {
+      [`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorDockedLeft}`]: {
+      [`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorDockedRight}`]: {
+      [`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
-      [`.${drawerClasses.paperAnchorDockedTop}`]: {
+      [`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`]: {
         color: 'red',
       },
     },
   },
 },

FilledInput

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

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

components

The FilledInput's prop components was deprecated in favor of slots:

 <FilledInput
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

The FilledInput's prop componentsProps was deprecated in favor of slotProps:

 <FilledInput
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

FormControlLabel

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

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

componentsProps

The FormControlLabel's componentsProps prop was deprecated in favor of slotProps:

 <FormControlLabel
-  componentsProps={{ typography: typographyProps }}
+  slotProps={{ typography: typographyProps }}
 />

Input

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

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

components

The Input's prop components was deprecated in favor of slots:

 <Input
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

The Input's prop componentsProps was deprecated in favor of slotProps:

 <Input
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

InputBase

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

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

components

The InputBase's prop components was deprecated in favor of slots:

 <InputBase
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

The InputBase's prop componentsProps was deprecated in favor of slotProps:

 <Input
-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
 />

ListItem

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

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

components

The ListItem's components prop was deprecated in favor of slots:

 <ListItem
-  components={{ Root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

The ListItem's componentsProps prop was deprecated in favor of slotProps:

 <ListItem
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

ContainerComponent

The ListItem's ContainerComponent prop was deprecated in favor of slots.root or component instead.

 <ListItem
-  ContainerComponent={CustomContainer}
+  slots={{ root: CustomContainer }}
 />

ContainerProps

The ListItem's ContainerProps prop was deprecated in favor of slotProps.root instead.

 <ListItem
-  ContainerProps={{ id: 'container-id' }}
+  slotProps={{ root: { id: 'container-id' } }}
 />

ListItemSecondaryAction

Deprecated component

The ListItemSecondaryAction component was deprecated in favor of the secondaryAction prop in the ListItem component.

 <ListItem
+  secondaryAction={
+    <IconButton aria-label="Leave a comment">
+      <CommentIcon />
+    </IconButton>
+  }
   disablePadding
 >
   <ListItemText primary="John Doe" />
-  <ListItemSecondaryAction>
-    <IconButton aria-label="Leave a comment">
-      <CommentIcon />
-    </IconButton>
-  </ListItemSecondaryAction>
 </ListItem>

ListItemText

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

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

primaryTypographyProps

The ListItemText's primaryTypographyProps props were deprecated in favor of slotProps.primary:

 <ListItemText
-  primaryTypographyProps={primaryTypographyProps}
+  slotProps={{ primary: primaryTypographyProps }}
 />

secondaryTypographyProps

The ListItemText's secondaryTypographyProps props were deprecated in favor of slotProps.secondary:

 <ListItemText
-  secondaryTypographyProps={secondaryTypographyProps}
+  slotProps={{ secondary: secondaryTypographyProps }}
 />

ImageListItemBar

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

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

Composed CSS classes

The CSS classes that composed the following props were deprecated:

position prop and titleWrap class
actionPosition prop and titleWrap class
actionPosition prop and actionIcon class

Here's how to migrate:

-.MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon

 import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';

 MuiImageListItemBar: {
   styleOverrides: {
     root: {
-      [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
+      [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
         color: 'red',
       },
-      [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
+      [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
         color: 'red',
       },
-      [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
+      [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
         color: 'red',
       },
-      [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
+      [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
         color: 'red',
       },
     },
   },
 },

LinearProgress

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

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

Composed CSS classes

The CSS classes that composed the variant and color prop values were deprecated.

Here's how to migrate:

-.MuiLinearProgress-bar1Buffer
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
-.MuiLinearProgress-bar1Determinate
+.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
-.MuiLinearProgress-bar1Indeterminate
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
-.MuiLinearProgress-bar2Buffer
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
-.MuiLinearProgress-bar2Indeterminate
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
-.MuiLinearProgress-barColorPrimary
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
-.MuiLinearProgress-barColorSecondary
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
-.MuiLinearProgress-dashedColorPrimary
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
-.MuiLinearProgress-dashedColorSecondary
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed

 import { linearProgressClasses } from '@mui/material/LinearProgress';

 MuiLinearProgress: {
   styleOverrides: {
     root: {
-      [`&.${linearProgressClasses.bar1Buffer}`]: {},
+      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
-      [`&.${linearProgressClasses.bar1Determinate}`]: {},
+      [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
-      [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
+      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
-      [`&.${linearProgressClasses.bar2Buffer}`]: {},
+      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
-      [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
+      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
-      [`&.${linearProgressClasses.barColorPrimary}`]: {},
+      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
-      [`&.${linearProgressClasses.barColorSecondary}`]: {},
+      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
-      [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
+      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
-      [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
+      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
     },
   },
 }

Modal

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

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

components

The Modal's components prop was deprecated in favor of slots:

 <Modal
-  components={{ Root: CustomRoot, Backdrop: CustomBackdrop }}
+  slots={{ root: CustomRoot, backdrop: CustomBackdrop }}
 >

componentsProps

The Modal's componentsProps prop was deprecated in favor of slotProps:

 <Modal
-  componentsProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
+  slotProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
 >

BackdropProps

The Modal's BackdropProps prop was deprecated in favor of slotProps.backdrop:

 <Modal
-  BackdropProps={{ timeout: 500 }}
+  slotProps={{ backdrop: { timeout: 500 } }}
 >

BackdropComponent

The Modal's BackdropComponent prop was deprecated in favor of slots.backdrop:

 <Modal
-  BackdropComponent={Backdrop}
+  slots={{ backdrop: Backdrop }}
 >

OutlinedInput

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

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

components

The OutlinedInput's prop components was deprecated in favor of slots:

 <OutlinedInput
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

The OutlinedInput's prop componentsProps was deprecated in favor of slotProps:

 <OutlinedInput
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

PaginationItem

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

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

Composed CSS classes

The CSS classes that composed the variant and color prop values were removed.

Here's how to migrate:

-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-colorPrimary
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-colorSecondary
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary

 import { paginationItemClasses } from '@mui/material/PaginationItem';

 MuiPaginationItem: {
   styleOverrides: {
     root: {
-      [`&.${paginationItemClasses.textPrimary}`]: {
+      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.outlinedPrimary}`]: {
+      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.textSecondary}`]: {
+      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.outlinedSecondary}`]: {
+      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
         color: 'red',
       },
     },
   },
 },

components

The PaginationItems's components prop was deprecated in favor of slots:

 <PaginationItems
-  components={{ first: FirstIcon, last: LastIcon, previous: PreviousIcons, next: NextIcon }}
+  slots={{ first: FirstIcon, last: LastIcon, previous: PreviousIcons, next: NextIcon }}
 />

Popover

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

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

BackdropComponent

The Popover's BackdropComponent prop was deprecated in favor of slots.backdrop:

 <Popover
-  BackdropComponent={Backdrop}
+  slots={{ backdrop: Backdrop }}
 >

BackdropProps

The Popover's BackdropProps prop was deprecated in favor of slotProps.backdrop:

 <Popover
-  BackdropProps={{ timeout: 500 }}
+  slotProps={{ backdrop: { timeout: 500 } }}
 >

PaperProps

The Popover's PaperProps prop was deprecated in favor of slotProps.paper:

 <Popover
-  PaperProps={{ id: 'paper-id' }}
+  slotProps={{ paper: { id: 'paper-id' } }}
 >

TransitionComponent

The Popover's TransitionComponent prop was deprecated in favor of slots.transition:

 <Popover
-  TransitionComponent={Transition}
+  slots={{ transition: Transition }}
 >

TransitionProps

The Popover's TransitionProps prop was deprecated in favor of slotProps.transition:

 <Popover
-  TransitionProps={{ timeout: 500 }}
+  slotProps={{ transition: { timeout: 500 } }}
 >

Popper

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

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

components

The Popper's prop components was deprecated in favor of slots:

 <Popper
-  components={{ Root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

The Popper's prop componentsProps was deprecated in favor of slotProps:

 <Popper
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

Select

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

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

Composed CSS classes

The CSS classes that composed the icon class and variant prop were removed.

Here's how to migrate:

- .MuiSelect-iconFilled
+ .MuiSelect-filled ~ .MuiSelect-icon
- .MuiSelect-iconOutlined
+ .MuiSelect-outlined ~ .MuiSelect-icon
- .MuiSelect-iconStandard
+ .MuiSelect-standard ~ .MuiSelect-icon

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

 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',
        },
     },
   },
 },

Slider

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

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

components

The Slider's components prop was deprecated in favor of slots:

 <Slider
-  components={{ Track: CustomTrack }}
+  slots={{ track: CustomTrack }}
 />

componentsProps

The Slider's componentsProps prop was deprecated in favor of slotProps:

 <Slider
-  componentsProps={{ track: { id: 'track-id' } }}
+  slotProps={{ track: { id: 'track-id' } }}
 />

ToggleButtonGroup

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

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

Composed CSS classes

The CSS classes composing the orientation prop value and grouped CSS class have been removed.

Here's how to migrate:

-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped

 import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';

 MuiButtonGroup: {
   styleOverrides: {
     root: {
-      [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
+      [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
+      [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
       },
     },
   },
 },

Tabs

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

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

flexContainer and flexContainerVertical classes

The class flexContainer has been deprecated in favor of list. The CSS classes composing the vertical prop value and flexContainer CSS class have been removed.

Here's how to migrate:

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

 import { tabsClasses } from '@mui/material/Tabs';

 MuiButtonGroup: {
   styleOverrides: {
     root: {
-      [`& .${tabsClasses.flexContainer}`]: {
+      [`& .${tabsClasses.list}`]: {
          color: 'red',
        },
-      [`& .${tabsClasses.flexContainerVertical}`]: {
+      [`& .${tabsClasses.list}.${tabsClasses.vertical}`]: {
          color: 'red',
       },
     },
   },
 },

ScrollButtonComponent

The Tabs's ScrollButtonComponent prop was deprecated in favor of slots.scrollButton:

 <Tabs
-  ScrollButtonComponent={ScrollButtonComponent}
+  slots={{ scrollButton: ScrollButtonComponent }}
 />

TabScrollButtonProps

The Tabs's TabScrollButtonProps prop was deprecated in favor of slotProps.scrollButton:

 <Tabs
-  TabScrollButtonProps={TabScrollButtonProps}
+  slotProps={{ scrollButton: TabScrollButtonProps }}
 />

TabIndicatorProps

The Tabs's TabIndicatorProps prop was deprecated in favor of slotProps.indicator:

 <Tabs
-  TabIndicatorProps={TabIndicatorProps}
+  slotProps={{ indicator: TabIndicatorProps }}
 />

slots.StartScrollButtonIcon

The Tabs's slots.StartScrollButtonIcon prop was deprecated in favor of slots.startScrollButtonIcon (camelCase):

 <Tabs
-  slots={{ StartScrollButtonIcon: StartScrollButtonIcon }}
+  slots={{ startScrollButtonIcon: StartScrollButtonIcon }}
 />

slots.EndScrollButtonIcon

The Tabs's slots.EndScrollButtonIcon prop was deprecated in favor of slots.endScrollButtonIcon (camelCase):

 <Tabs
-  slots={{ EndScrollButtonIcon: EndScrollButtonIcon }}
+  slots={{ endScrollButtonIcon: EndScrollButtonIcon }}
 />

Tab

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

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

Composed CSS classes

The iconWrapper class is removed.

Here's how to migrate:

- .MuiTab-iconWrapper
+ .MuiTab-icon

 import { tabClasses } from '@mui/material/Tab';

 MuiTab: {
   styleOverrides: {
     root: {
-      [`& .${tabClasses.iconWrapper}`]: {
+      [`& .${tabClasses.icon}`]: {
         color: 'red',
       },
     },
   },
 },

TableSortLabel

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

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

Composed CSS classes

The CSS classes that composed the direction prop and icon prop were removed.

Here's how to migrate:

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

 import { tableSortLabelClasses } from '@mui/material/TableSortLabel';

 MuiTableSortLabel: {
   styleOverrides: {
     root: {
-      [`& .${tableSortLabelClasses.iconDirectionDesc}`]: {
+      [`&.${tableSortLabelClasses.directionDesc} > .${tableSortLabelClasses.icon}`]: {
         color: 'red',
       },
-      [`& .${tableSortLabelClasses.iconDirectionAsc}`]: {
+      [`&.${tableSortLabelClasses.directionAsc} > .${tableSortLabelClasses.icon}`]: {
         color: 'red',
       },
     },
   },
 },

TextField

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

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

*Props props

All of the TextField's slot props (*Props) props were deprecated in favor of equivalent slotProps entries:

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

Tooltip

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

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

components

The Tooltip's prop components was deprecated in favor of slots:

 <Tooltip
-  components={{ Arrow: CustomArrow }}
+  slots={{ arrow: CustomArrow }}
 />

componentsProps

The Tooltip's prop componentsProps was deprecated in favor of slotProps:

 <Tooltip
-  componentsProps={{ arrow: { id: 'arrow-id' } }}
+  slotProps={{ arrow: { id: 'arrow-id' } }}
 />

*Component props

All of the Tooltip's slot (*Component) props were deprecated in favor of equivalent slots entries:

 <Tooltip
-  PopperComponent={CustomPopperComponent}
-  TransitionComponent={CustomTransitionComponent}
+  slots={{
+    popper: CustomPopperComponent,
+    transition: CustomTransitionComponent,
+  }}
 />

*Props props

All of the Tooltip's slot props (*Props) props were deprecated in favor of equivalent slotProps entries:

 <Tooltip
-  PopperProps={CustomPopperProps}
-  TransitionProps={CustomTransitionProps}
+  slotProps={{
+    popper: CustomPopperProps,
+    transition: CustomTransitionProps,
+  }}
 />

Typography

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

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

paragraph

The Typography's paragraph prop was deprecated. If you want to render p when using Typography, pass component="p".

 <Typography
   variant="subtitle1"
-  paragraph
+  component="p"
 />

Note that Typography already renders a p by default, so there's no need to pass component="p" when not explicitly passing a variant. This is because body1 is the default variant in Typography, and body1 and body2 variants render p, so there's no need to pass component="p" when using one of these variants.

The 16px of margin-bottom that was automatically added to the element when using paragraph must be manually handled now. The codemod that removes the paragraph prop adds sx={{ marginBottom: '16px' }} to the Typography component.

StepLabel

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

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

componentsProps

The StepLabel's componentsProps prop was deprecated in favor of slotProps:

 <StepLabel
-  componentsProps={{ label: labelProps }}
+  slotProps={{ label: labelProps }}
 />

StepIconComponent

The StepLabel's StepIconComponent prop was deprecated in favor of slots.stepIcon:

 <StepLabel
-  StepIconComponent={StepIconComponent}
+  slots={{ stepIcon: StepIconComponent }}
 />

StepIconProps

The StepLabel's StepIconProps prop was deprecated in favor of slotProps.stepIcon:

 <StepLabel
-  StepIconProps={StepIconProps}
+  slotProps={{ stepIcon: StepIconProps }}
 />

StepConnector

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

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

Composed CSS classes

The CSS classes that composed the line CSS class and orientation prop values were removed.

Here's how to migrate:

-.MuiStepConnector-lineHorizontal
+.MuiStepConnector-horizontal > .MuiStepConnector-line
-.MuiStepConnector-lineVertical
+.MuiStepConnector-vertical > .MuiStepConnector-line

 import { stepConnectorClasses } from '@mui/material/StepConnector';

 MuiStepConnector: {
   styleOverrides: {
     root: {
-      [`& .${stepConnectorClasses.lineHorizontal}`]: {
+      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
         color: 'red',
       },
-      [`& .${stepConnectorClasses.lineVertical}`]: {
+      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
         color: 'red',
       },
     },
   },
 },

StepContent

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

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

TransitionComponent

The StepContent's TransitionComponent prop was deprecated in favor of slots.transition:

 <StepContent
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}
 />

TransitionProps

The StepContent's TransitionProps prop was deprecated in favor of slotProps.transition:

 <StepContent
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

SpeedDial

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

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

TransitionComponent

The SpeedDial's TransitionComponent prop was deprecated in favor of slots.transition:

 <SpeedDial
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}

TransitionProps

The SpeedDial's TransitionProps prop was deprecated in favor of slotProps.transition:

 <SpeedDial
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

Files

migrating-from-deprecated-apis.md

Latest commit

History

migrating-from-deprecated-apis.md

File metadata and controls

Migrating from deprecated APIs

Why you should migrate

Migrating

Package-wide deprecated APIs

Inner element overrides

Composed CSS classes

System props

Theme component variants

Accordion

TransitionComponent

TransitionProps

AccordionSummary

.MuiAccordionSummary-contentGutters

Alert

components

componentsProps

Composed CSS classes

Autocomplete

*Component props

*Props props

componentsProps

Avatar

imgProps

AvatarGroup

slotProps.additionalAvatar

componentsProps

Backdrop

components

componentsProps

TransitionComponent

Badge

components

componentsProps

Button

Composed CSS classes

ButtonGroup

Composed CSS classes

CardHeader

titleTypographyProps

subheaderTypographyProps

Chip

Composed CSS classes

CircularProgress

Composed CSS classes

Divider

light

Drawer

Composed CSS classes

FilledInput

components

componentsProps

FormControlLabel

componentsProps

Input

components

componentsProps

InputBase

components

componentsProps

ListItem

components

componentsProps

ContainerComponent

ContainerProps

ListItemSecondaryAction

Deprecated component

ListItemText

primaryTypographyProps

secondaryTypographyProps

ImageListItemBar

Composed CSS classes

LinearProgress

Composed CSS classes

Modal