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