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

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