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.

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 was deprecated in favor of slots.transition:

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

TransitionProps

The Accordion's TransitionProps 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 codemod below to migrate the code as described in the following sections:

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

components

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

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

componentsProps

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

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

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 was deprecated in favor of slotProps.img:

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

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" }}
 />