Codemod scripts for Material UI, Base UI, MUI System, Joy UI.
This repository contains a collection of codemod scripts based for use with jscodeshift that help update the APIs. Some of the codemods also run postcss plugins to update CSS files.
npx @mui/codemod@next <codemod> <paths...>
Applies a `@mui/codemod` to the specified paths
Positionals:
codemod The name of the codemod [string]
paths Paths forwarded to `jscodeshift` [string]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--dry dry run (no changes are made to files)
[boolean] [default: false]
--parser which parser for jscodeshift to use.
[string] [default: 'tsx']
--print print transformed files to stdout, useful for development
[boolean] [default: false]
--jscodeshift [string] [default: false]
Examples:
npx @mui/codemod@next v4.0.0/theme-spacing-api src
npx @mui/codemod@next v5.0.0/component-rename-prop src --
--component=Grid --from=prop --to=newProp
npx @mui/codemod@next v5.0.0/preset-safe src --parser=flowUse this flag if you have a custom package name that reexports Material UI components. For example:
npx @mui/codemod@next --packageName="@org/ui"The snippet above will look for @org/ui instead of @mui/material in the codemod.
To pass more options directly to jscodeshift, use --jscodeshift="...". For example:
npx @mui/codemod@next --jscodeshift="--run-in-band --verbose=2"See all available options here.
Options to recast's printer can be provided
through jscodeshift's printOptions command line argument
npx @mui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"npx @mui/codemod@next deprecations/all <path>A combination of all deprecations.
<Accordion
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>npx @mui/codemod@next deprecations/accordion-props <path>JS transforms:
import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
MuiAccordionSummary: {
styleOverrides: {
root: {
- [`& .${accordionSummaryClasses.contentGutters}`]: {
+ [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
color: 'red',
},
},
},
}, MuiAccordionSummary: {
styleOverrides: {
root: {
- '& .MuiAccordionSummary-contentGutters': {
+ '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
color: 'red',
},
},
},
},CSS transforms:
-.MuiAccordionSummary-root .MuiAccordionSummary-contentGutters
+.MuiAccordionSummary-root.MuiAccordionSummary-gutters .MuiAccordionSummary-contentnpx @mui/codemod@next deprecations/accordion-summary-classes <path>JS transforms:
import { alertClasses } from '@mui/material/PaginationItem';
MuiPaginationItem: {
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',
},
},
},
},CSS transforms:
-.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-colorErrornpx @mui/codemod@next deprecations/alert-classes <path> <Alert
- components={{ CloseButton: CustomButton }}
- componentsProps={{ closeButton: { testid: 'test-id' } }}
+ slots={{ closeButton: CustomButton }}
+ slotProps={{ closeButton: { testid: 'test-id' } }}
/> MuiAlert: {
defaultProps: {
- components: { CloseButton: CustomButton }
- componentsProps: { closeButton: { testid: 'test-id' }}
+ slots: { closeButton: CustomButton },
+ slotProps: { closeButton: { testid: 'test-id' } },
},
},npx @mui/codemod@next deprecations/alert-props <path> <Autocomplete
- ChipProps={{ height: 10 }}
- PaperComponent={CustomPaper}
- PopperComponent={CustomPopper}
- ListboxComponent={CustomListbox}
- ListboxProps={{ height: 12 }}
- renderTags={(value, getTagProps, ownerState) =>
- value.map((option, index) => (
- <Chip label={option.label} {...getTagProps({ index })} />
- ))
- }
- componentsProps={{
- clearIndicator: { width: 10 },
- paper: { width: 12 },
- popper: { width: 14 },
- popupIndicator: { width: 16 },
- }}
+ slots={{
+ paper: CustomPaper,
+ popper: CustomPopper
+ }}
+ slotProps={{
+ chip: { height: 10 },
+ listbox: {
+ component: CustomListbox,
+ ...{ height: 12 },
+ },
+ clearIndicator: { width: 10 },
+ paper: { width: 12 },
+ popper: { width: 14 },
+ popupIndicator: { width: 16 },
+ }}
+ renderValue={(value, getItemProps, ownerState) =>
+ value.map((option, index) => (
+ <Chip label={option.label} {...getItemProps({ index })} />
+ ))
+ }
/> MuiAutocomplete: {
defaultProps: {
- ChipProps: { height: 10 },
- PaperComponent: CustomPaper,
- PopperComponent: CustomPopper,
- ListboxComponent: CustomListbox,
- ListboxProps: { height: 12 },
- renderTags: (value, getTagProps, ownerState) =>
- value.map((option, index) => (
- <Chip label={option.label} {...getTagProps({ index })} />
- )),
- componentsProps: {
- clearIndicator: { width: 10 },
- paper: { width: 12 },
- popper: { width: 14 },
- popupIndicator: { width: 16 },
- }
+ slots: {
+ paper: CustomPaper,
+ popper: CustomPopper,
+ },
+ slotProps: {
+ chip: { height: 10 },
+ listbox: {
+ component: CustomListbox,
+ ...{ height: 12 },
+ },
+ clearIndicator: { width: 10 },
+ paper: { width: 12 },
+ popper: { width: 14 },
+ popupIndicator: { width: 16 },
+ },
+ renderValue: (value, getItemProps, ownerState) =>
+ value.map((option, index) => (
+ <Chip label={option.label} {...getItemProps({ index })} />
+ )),
},
}, const {
- getTagProps,
- focusedTag,
+ getItemProps,
+ focusedItem,
} = useAutocomplete(props);npx @mui/codemod@next deprecations/autocomplete-props <path> <AvatarGroup
- componentsProps={{
- additionalAvatar: { color: 'red' },
+ slotProps={{
+ surplus: { color: 'red' },
}}
/> <AvatarGroup
slotProps={{
- additionalAvatar: { color: 'red' },
+ surplus: { color: 'red' },
}}
/> MuiAvatarGroup: {
defaultProps: {
- componentsProps: {
- additionalAvatar: { color: 'red' },
+ slotProps: {
+ surplus: { color: 'red' },
},
},
}, MuiAvatarGroup: {
defaultProps: {
slotProps: {
- additionalAvatar: { color: 'red' },
+ surplus: { color: 'red' },
},
},
},npx @mui/codemod@next deprecations/avatar-group-props <path> <Avatar
- imgProps={{
- onError: () => {},
- onLoad: () => {},
+ slotProps={{
+ img: {
+ onError: () => {},
+ onLoad: () => {},
+ },
}}
/>npx @mui/codemod@next deprecations/avatar-props <path> <Backdrop
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/> MuiBackdrop: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'root-id' } }
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'root-id' } },
},
}, <Backdrop
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
/>npx @mui/codemod@next deprecations/backdrop-props <path> <Badge
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/> MuiBadge: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},npx @mui/codemod@next deprecations/badge-props <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.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-iconnpx @mui/codemod@next deprecations/button-classes <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.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-groupednpx @mui/codemod@next deprecations/button-group-classes <path>JS transforms:
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',
},
},
},
},
CSS transforms:
-.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-deleteIconnpx @mui/codemod@next deprecations/chip-classes <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.MuiCircularProgress-circleDeterminate
+.MuiCircularProgress-determinate > .MuiCircularProgress-circle-.MuiCircularProgress-circleIndeterminate
+.MuiCircularProgress-indeterminate > .MuiCircularProgress-circlenpx @mui/codemod@next deprecations/circular-progress-classes <path> <Divider
- light
+ sx={{ opacity: 0.6 }}
/>npx @mui/codemod@next deprecations/divider-props <path>JS transforms:
import { dialogClasses } from '@mui/material/Dialog';
MuiDialog: {
styleOverrides: {
root: {
- [`& .${dialogClasses.paperScrollBody}`]: {
+ [`& .${dialogClasses.scrollBody} > .${dialogClasses.paper}`]: {
color: 'red',
},
- [`& .${dialogClasses.paperScrollPaper}`]: {
+ [`& .${dialogClasses.scrollPaper} > .${dialogClasses.paper}`]: {
color: 'red',
},
},
},
},CSS transforms:
-.MuiDialog-root .MuiDialog-paperScrollBody
+.MuiDialog-root .MuiDialog-scrollBody > .MuiDialog-paper
-.MuiDialog-root .MuiDialog-paperScrollPaper
+.MuiDialog-root .MuiDialog-scrollPaper > .MuiDialog-papernpx @mui/codemod@next deprecations/dialog-classes <path>JS transforms:
<Dialog
- PaperProps={paperProps}
+ slotProps={{ paper: paperProps }}
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
- TransitionProps={CustomTransitionProps}
+ slotProps={{ transition: CustomTransitionProps }}
/>
},
},
},npx @mui/codemod@next deprecations/dialog-props <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.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-papernpx @mui/codemod@next deprecations/drawer-classes <path> <FilledInput
- components={{ Input: CustomInput, Root: CustomRoot }}
- componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ slots={{ input: CustomInput, root: CustomRoot }}
+ slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
/> MuiFilledInput: {
defaultProps: {
- components: { Input: CustomInput, Root: CustomRoot }
- componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
+ slots: { input: CustomInput, root: CustomRoot },
+ slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
},
},npx @mui/codemod@next deprecations/filled-input-props <path> <FormControlLabel
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
/> MuiFormControlLabel: {
defaultProps: {
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
},
},npx @mui/codemod@next deprecations/form-control-label-props <path>
<ListItem
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/> MuiListItem: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},npx @mui/codemod@next deprecations/list-item-props <path> <ListItemText
- primaryTypographyProps={primaryTypographyProps}
+ slotProps={{ primary: primaryTypographyProps }}
- secondaryTypographyProps={secondaryTypographyProps}
+ slotProps={{ secondary: secondaryTypographyProps }}
/> MuiListItemText: {
defaultProps: {
- primaryTypographyProps:primaryTypographyProps
+ slotProps:{ primary: primaryTypographyProps }
- secondaryTypographyProps:secondaryTypographyProps
+ slotProps:{ secondary: secondaryTypographyProps }
},
},npx @mui/codemod@next deprecations/list-item-text-props <path>JS transforms:
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',
},
},
},
},CSS transforms:
- .MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap- .MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap- .MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap- .MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIconnpx @mui/codemod@next deprecations/image-list-item-bar-classes <path> <InputBase
- components={{ Input: CustomInput, Root: CustomRoot }}
- componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ slots={{ input: CustomInput, root: CustomRoot }}
+ slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
/> MuiInputBase: {
defaultProps: {
- components: { Input: CustomInput, Root: CustomRoot }
- componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
+ slots: { input: CustomInput, root: CustomRoot },
+ slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
},
},npx @mui/codemod@next deprecations/input-base-props <path>JS transforms:
import { inputBaseClasses } from '@mui/material/InputBase';
MuiInputBase: {
styleOverrides: {
root: {
- [`& .${inputBaseClasses.inputSizeSmall}`]: {
+ [`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`]: {
color: 'red',
},
- [`& .${inputBaseClasses.inputMultiline}`]: {
+ [`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`]: {
color: 'red',
},
- [`& .${inputBaseClasses.inputAdornedStart}`]: {
+ [`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`]: {
color: 'red',
},
- [`& .${inputBaseClasses.inputAdornedEnd}`]: {
+ [`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`]: {
color: 'red',
},
- [`& .${inputBaseClasses.inputHiddenLabel}`]: {
+ [`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`]: {
color: 'red',
},
},
},
},CSS transforms:
-.MuiInputBase-root .MuiInputBase-inputSizeSmall
+.MuiInputBase-root.MuiInputBase-sizeSmall > .MuiInputBase-input
-.MuiInputBase-root .MuiInputBase-inputMultiline
+.MuiInputBase-root.MuiInputBase-multiline > .MuiInputBase-input
-.MuiInputBase-root .MuiInputBase-inputAdornedStart
+.MuiInputBase-root.MuiInputBase-adornedStart > .MuiInputBase-input
-.MuiInputBase-root .MuiInputBase-inputAdornedEnd
+.MuiInputBase-root.MuiInputBase-adornedEnd > .MuiInputBase-input
-.MuiInputBase-root .MuiInputBase-inputHiddenLabel
+.MuiInputBase-root.MuiInputBase-hiddenLabel > .MuiInputBase-inputnpx @mui/codemod@next deprecations/input-base-classes <path> <Input
- components={{ Input: CustomInput, Root: CustomRoot }}
- componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ slots={{ input: CustomInput, root: CustomRoot }}
+ slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
/> MuiInput: {
defaultProps: {
- components: { Input: CustomInput, Root: CustomRoot }
- componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
+ slots: { input: CustomInput, root: CustomRoot },
+ slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
},
},npx @mui/codemod@next deprecations/input-props <path>JS transforms:
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}`]: {},
},
},
}CSS transforms:
-.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-dashednpx @mui/codemod@next deprecations/linear-progress-classes <path> <Modal
- components={{ Root: CustomRoot, Backdrop: CustomBackdrop }}
- componentsProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
+ slots={{ root: CustomRoot, backdrop: CustomBackdrop }}
+ slotProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
/> MuiModal: {
defaultProps: {
- components: { Root: CustomRoot, Backdrop: CustomBackdrop }
- componentsProps: { root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' }}
+ slots: { root: CustomRoot, backdrop: CustomBackdrop },
+ slotProps: { root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } },
},
},npx @mui/codemod@next deprecations/modal-props <path> <MobileStepper
- LinearProgressProps={{ color: 'primary' }}
+ slotProps={{ progress: { color: 'primary' } }}
/>npx @mui/codemod@next deprecations/mobile-stepper-props <path>JS transforms:
import { paginationItemClasses } from '@mui/material/PaginationItem';
MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textPrimary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.textSecondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedPrimary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedSecondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- '&.MuiPaginationItem-textPrimary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-textSecondary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedPrimary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedSecondary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': {
color: 'red',
},
},
},
},CSS transforms:
-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-primary
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-secondary
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-primary
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-secondarynpx @mui/codemod@next deprecations/pagination-item-classes <path> <PaginationItem
- components={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
+ slots={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
/> MuiPaginationItem: {
defaultProps: {
- components: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
+ slots: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
},
},npx @mui/codemod@next deprecations/pagination-item-props <path> <Popper
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/> MuiPopper: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},npx @mui/codemod@next deprecations/popper-props <path> <OutlinedInput
- components={{ Input: CustomInput, Root: CustomRoot }}
- componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ slots={{ input: CustomInput, root: CustomRoot }}
+ slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
/> MuiOutlinedInput: {
defaultProps: {
- components: { Input: CustomInput, Root: CustomRoot }
- componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
+ slots: { input: CustomInput, root: CustomRoot },
+ slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
},
},npx @mui/codemod@next deprecations/outlined-input-props <path> <Rating
- IconContainerComponent={CustomContainer}
+ slots={{
+ icon: { component: CustomContainer }
+ }}
/>npx @mui/codemod@next deprecations/rating-props <path>JS transforms:
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',
},
},
},
},CSS transforms:
- .MuiSelect-iconFilled
+ .MuiSelect-filled ~ .MuiSelect-icon- .MuiSelect-iconOutlined
+ .MuiSelect-outlined ~ .MuiSelect-icon- .MuiSelect-iconStandard
+ .MuiSelect-standard ~ .MuiSelect-iconnpx @mui/codemod@next deprecations/select-classes <path> <Slider
- components={{ Track: CustomTrack }}
- componentsProps={{ track: { testid: 'test-id' } }}
+ slots={{ track: CustomTrack }}
+ slotProps={{ track: { testid: 'test-id' } }}
/> MuiSlider: {
defaultProps: {
- components: { Track: CustomTrack }
- componentsProps: { track: { testid: 'test-id' }}
+ slots: { track: CustomTrack },
+ slotProps: { track: { testid: 'test-id' } },
},
},npx @mui/codemod@next deprecations/slider-props <path> <Snackbar
- ClickAwayListenerProps={CustomClickAwayListenerProps}
- ContentProps={CustomContentProps}
- TransitionComponent={CustomTransition}
- TransitionProps={CustomTransitionProps}
+ slots={{ transition: CustomTransition }}
+ slotProps={{
+ clickAwayListener: CustomClickAwayListenerProps,
+ content: CustomContentProps,
+ transition: CustomTransitionProps
+ }}
/>npx @mui/codemod@next deprecations/snackbar-props <path>JS transforms:
import { sliderClasses } from '@mui/material/Slider';
MuiSlider: {
styleOverrides: {
root: {
- [`& .${sliderClasses.thumbSizeSmall}`]: {
+ [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbSizeMedium}`]: {
+ [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorPrimary}`]: {
+ [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorSecondary}`]: {
+ [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorError}`]: {
+ [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorInfo}`]: {
+ [`&.${sliderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorSuccess}`]: {
+ [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
color: 'red',
},
- [`& .${sliderClasses.thumbColorWarning}`]: {
+ [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
color: 'red',
},
},
},
},CSS transforms:
-.MuiSlider-root .MuiSlider-thumbSizeSmall
+.MuiSlider-root.MuiSlider-sizeSmall > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbSizeMedium
+.MuiSlider-root.MuiSlider-sizeMedium > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorPrimary
+.MuiSlider-root.MuiSlider-colorPrimary > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorSecondary
+.MuiSlider-root.MuiSlider-colorSecondary > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorError
+.MuiSlider-root.MuiSlider-colorError > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorInfo
+.MuiSlider-root.MuiSlider-colorInfo > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorSuccess
+.MuiSlider-root.MuiSlider-colorSuccess > .MuiSlider-thumb
-.MuiSlider-root .MuiSlider-thumbColorWarning
+.MuiSlider-root.MuiSlider-colorWarning > .MuiSlider-thumbnpx @mui/codemod@next deprecations/slider-classes <path> <Tooltip
- components={{ Arrow: CustomArrow }}
- componentsProps={{ arrow: { testid: 'test-id' } }}
- PopperComponent={CustomPopperComponent}
- TransitionComponent={CustomTransitionComponent}
- PopperProps={CustomPopperProps}
- TransitionProps={CustomTransitionProps}
+ slots={{
+ arrow: CustomArrow,
+ popper: CustomPopperComponent,
+ transition: CustomTransitionComponent,
+ }}
+ slotProps={{
+ arrow: { testid: 'test-id' },
+ popper: CustomPopperProps,
+ transition: CustomTransitionProps,
+ }}
/> MuiTooltip: {
defaultProps: {
- PopperComponent: CustomPopperComponent,
- TransitionComponent: CustomTransitionComponent,
- PopperProps: CustomPopperProps,
- TransitionProps: CustomTransitionProps,
- components: { Arrow: CustomArrow }
+ slots: {
+ arrow: CustomArrow,
+ popper: CustomPopperComponent,
+ transition: CustomTransitionComponent,
+ },
- componentsProps: { arrow: { testid: 'test-id' }}
+ slotProps: {
+ arrow: { testid: 'test-id' },
+ popper: CustomPopperProps,
+ transition: CustomTransitionProps,
+ },
},
},npx @mui/codemod@next deprecations/tooltip-props <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.MuiStepConnector-lineHorizontal
+.MuiStepConnector-horizontal > .MuiStepConnector-line-.MuiStepConnector-lineVertical
+.MuiStepConnector-vertical > .MuiStepConnector-linenpx @mui/codemod@next deprecations/step-connector-classes <path> <StepContent
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>npx @mui/codemod@next deprecations/step-content-props <path> <StepLabel
- componentsProps={{ label: labelProps }}
+ slotProps={{ label: labelProps }}
- StepIconComponent={StepIconComponent}
+ slots={{ stepIcon: StepIconComponent }}
- StepIconProps={StepIconProps}
+ slotProps={{ stepIcon: StepIconProps }}
/> MuiStepLabel: {
defaultProps: {
- componentsProps:{ label: labelProps }
+ slotProps:{ label: labelProps }
- StepIconComponent:StepIconComponent
+ slots:{ stepIcon: StepIconComponent }
- StepIconProps:StepIconProps
+ slotProps:{ stepIcon: StepIconProps }
},
},npx @mui/codemod@next deprecations/step-label-props <path> <TextField
- InputProps={CustomInputProps}
- inputProps={CustomHtmlInputProps}
- SelectProps={CustomSelectProps}
- InputLabelProps={CustomInputLabelProps}
- FormHelperTextProps={CustomFormHelperProps}
+ slotProps={{
+ input: CustomInputProps,
+ htmlInput: CustomHtmlInputProps,
+ select: CustomSelectProps,
+ inputLabel: CustomInputLabelProps,
+ formHelper: CustomFormHelperProps,
+ }}
/>npx @mui/codemod@next deprecations/text-field-props <path>JS transforms:
import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
MuiToggleButtonGroup: {
styleOverrides: {
root: {
- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
+ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
color: 'red',
},
- [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
+ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
color: 'red',
},
},
},
},CSS transforms:
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-groupednpx @mui/codemod@next deprecations/toggle-button-group-classes <path>JS transforms:
import { tabClasses } from '@mui/material/Tab';
MuiTab: {
styleOverrides: {
root: {
- [`& .${tabClasses.iconWrapper}`]: {
+ [`& .${tabClasses.icon}`]: {
color: 'red',
},
},
},
},CSS transforms:
-.MuiTab-iconWrapper
+.MuiTab-iconnpx @mui/codemod@next deprecations/tab-classes <path>JS transforms:
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',
},
},
},
},CSS transforms:
-.MuiTableSortLabel-iconDirectionDesc
+.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon-.MuiTableSortLabel-iconDirectionAsc
+.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-iconnpx @mui/codemod@next deprecations/table-sort-label-classes <path> <Typography
- paragraph
+ sx={{ marginBottom: '16px' }}
/> <Typography
- paragraph={isTypographyParagraph}
+ sx={isTypographyParagraph ? { marginBottom: '16px' } : undefined}
/> MuiTypography: {
defaultProps: {
- paragraph: true
+ sx: { marginBottom: '16px' },
},
},npx @mui/codemod@next deprecations/typography-props <path>npx @mui/codemod@next v7.0.0/theme-color-functions <path>Replace the usage of the alpha(), lighten(), and darken() functions from @mui/system/colorManipulator to use the theme object instead.
- import { alpha, lighten, darken } from '@mui/system/colorManipulator';
- alpha(theme.palette.primary.main, 0.8)
+ theme.alpha((theme.vars || theme).palette.primary.main, 0.8)
- lighten(theme.palette.primary.main, 0.1)
+ theme.lighten(theme.palette.primary.main, 0.1)
- darken(theme.palette.primary.main, 0.3)
+ theme.darken(theme.palette.primary.main, 0.3)npx @mui/codemod@next v7.0.0/grid-props <path>Updates the usage of the @mui/material/Grid, @mui/system/Grid, and @mui/joy/Grid components to their updated APIs.
<Grid
- xs={12}
- sm={6}
- xsOffset={2}
- smOffset={3}
+ size={{ xs: 12, sm: 6 }}
+ offset={{ xs: 2, sm: 3 }}
/>You can provide the theme breakpoints via options, for example, --jscodeshift='--muiBreakpoints=mobile,desktop', to use your custom breakpoints in the transformation.
npx @mui/codemod@next v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'- <Grid mobile={12} mobileOffset={2} desktop={6} desktopOffset={4} >
+ <Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }} >npx @mui/codemod@next v7.0.0/lab-removed-components <path>Update the import of the following components and hook moved from @mui/lab to @mui/material:
- Alert
- AlertTitle
- Autocomplete
- AvatarGroup
- Pagination
- PaginationItem
- Rating
- Skeleton
- SpeedDial
- SpeedDialAction
- SpeedDialIcon
- ToggleButton
- ToggleButtonGroup
- usePagination
It updates named imports from top-level @mui/lab:
- import { Alert } from '@mui/lab';
+ import { Alert } from '@mui/material';As well as default and named imports from component-level files:
- import Alert, { alertClasses } from '@mui/lab/Alert';
+ import Alert, { alertClasses } from '@mui/material/Alert';Updates the InputLabel's size value from normal to medium.
-<InputLabel size="normal">Label</InputLabel>
+<InputLabel size="medium">Label</InputLabel>npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path>You can find more details about this breaking change in the migration guide.
npx @mui/codemod@next v6.0.0/sx-prop <path>Update the usage of the sx prop to be compatible with @pigment-css/react.
<Box
- sx={{
- backgroundColor: (theme) =>
- theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
- }}
+ sx={theme => ({
+ backgroundColor: theme.palette.grey[900],
+ ...theme.applyStyles("light", {
+ backgroundColor: theme.palette.grey[100]
+ })
+ })}
/>npx @mui/codemod@next v6.0.0/system-props <path>Remove system props and add them to the sx prop.
-<Box ml="2px" py={1} color="primary.main" />
+<Box sx={{ ml: '2px', py: 1, color: 'primary.main' }} />npx @mui/codemod@next v6.0.0/theme-v6 <path>Update the theme creation from @mui/system@v5 to be compatible with @pigment-css/react.
- replace palette mode conditional with
theme.applyStyles() - replace
ownerStatewithvariants - move theme variants to the root slot
createTheme({
components: {
MuiButton: {
- variants: [
- {
- props: { color: 'primary' },
- style: {
- color: 'red',
- },
- },
- ],
styleOverrides: {
- root: ({ theme, ownerState }) => ({
+ root: ({ theme }) => ({
...ownerState.variant === 'contained' && {
backgroundColor: alpha(theme.palette.primary.main, 0.8),
...theme.palette.mode === 'dark' && {
backgroundColor: alpha(theme.palette.primary.light, 0.9),
}
},
+ variants: [
+ {
+ prop: { variant: 'contained' },
+ style: {
+ backgroundColor: alpha(theme.palette.primary.main, 0.8),
+ },
+ },
+ {
+ prop: { variant: 'contained' },
+ style: {
+ ...theme.applyStyles('dark', {
+ backgroundColor: alpha(theme.palette.primary.light, 0.9),
+ })
+ },
+ },
+ {
+ prop: { color: 'primary' },
+ style: {
+ color: 'red',
+ },
+ },
+ ],
})
}
}
}
})npx @mui/codemod@next v6.0.0/styled <path>Updates the usage of styled from @mui/system@v5 to be compatible with @pigment-css/react.
This codemod transforms the styles based on props to variants by looking for styled calls:
styled('div')(({ theme, disabled }) => ({
color: theme.palette.primary.main,
- ...(disabled && {
- opacity: 0.5,
- }),
+ variants: [
+ {
+ prop: 'disabled',
+ style: {
+ opacity: 0.5,
+ },
+ },
+ ],
}));This codemod can handle complex styles with spread operators, ternary operators, and nested objects.
However, it has some limitations:
-
It does not transform dynamic values as shown below:
const ResizableContainer = styled('div')(({ ownerState, theme }) => ({ width: ownerState.width ?? '100%', height: ownerState.height ?? '100%', }));
You need to manually declare a CSS variable and set the values using inline styles:
// ✅ Recommended way const ResizableContainer = styled('div')({ width: 'var(--ResizableContainer-width, 100%)', height: 'var(--ResizableContainer-height, 100%)', });
-
It does not transform dynamic reference from the theme, for example color palette.
const Test = styled('div')(({ ownerState, theme }) => ({ backgroundColor: (theme.vars || theme).palette[ownerState.color]?.main, }));
You need to manually iterate the theme object and create
variantsfor each color.// ✅ Recommended way const Test = styled('div')(({ theme }) => ({ variants: Object.entries(theme.palette) .filter(([color, value]) => value.main) .map(([color, value]) => ({ props: { color }, style: { backgroundColor: value.main, }, })), }));
npx @mui/codemod@next v6.0.0/grid-v2-props <path>Updates the usage of the @mui/material/Grid2, @mui/system/Grid, and @mui/joy/Grid components to their updated APIs.
<Grid
- xs={12}
- sm={6}
- xsOffset={2}
- smOffset={3}
+ size={{ xs: 12, sm: 6 }}
+ offset={{ xs: 2, sm: 3 }}
/>You can provide the theme breakpoints via options, for example, --jscodeshift='--muiBreakpoints=mobile,desktop', to use your custom breakpoints in the transformation.
npx @mui/codemod@next v6.0.0/grid-v2-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'- <Grid mobile={12} mobileOffset={2} desktop={6} desktopOffset={4} >
+ <Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }} >Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. This was changed to improve consistency and avoid problems some bundlers have with default exports. See mui#21862 for more context.
This codemod updates the import and re-export statements.
-import BaseButton from '@mui/base/Button';
-export { default as BaseSlider } from '@mui/base/Slider';
+import { Button as BaseButton } from '@mui/base/Button';
+export { Slider as BaseSlider } from '@mui/base/Slider';npx @mui/codemod@next v5.0.0/base-use-named-exports <path>The Unstyled suffix has been removed from all Base UI component names, including names of types and other related identifiers.
-<Input component='a' href='url' />;
+<Input slots={{ root: 'a' }} href='url' />;npx @mui/codemod@next v5.0.0/base-remove-unstyled-suffix <path>Remove component prop from all Base UI components by transferring its value into slots.root.
This change only affects Base UI components.
-<Input component={CustomRoot} />
+<Input slots={{ root: CustomRoot }} />npx @mui/codemod@next v5.0.0/base-remove-component-prop <path>Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components.
-<List sx={{ py: 'var(--List-divider-gap)' }}>
-<Switch sx={{ '--Switch-track-width': '40px' }}>
+<List sx={{ py: 'var(--ListDivider-gap)' }}>
+<Switch sx={{ '--Switch-trackWidth': '40px' }}>npx @mui/codemod@next v5.0.0/rename-css-variables <path>Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
-import { useBadge } from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';npx @mui/codemod@next v5.0.0/base-hook-imports <path>Renames the classname prefix from 'Joy' to 'Mui' for Joy UI components.
<Button
- sx={{ '& .JoyButton-root': { '& .JoyButton-button': {} } }}
+ sx={{ '& .MuiButton-root': { '& .MuiButton-button': {} } }}
/>;npx @mui/codemod@next v5.0.0/joy-rename-classname-prefix <path>Transforms row prop to orientation prop across Card, List and RadioGroup components.
<Card
- row
+ orientation="horizontal"
/>;npx @mui/codemod@next v5.0.0/joy-rename-row-prop <path>Remove imgProps prop by transferring its value into slotProps.img
This change only affects Joy UI Avatar component.
<Avatar
- imgProps={{ ['data-id']: 'imageId' }}
- slotProps={{ root: { ['data-id']: 'rootId' }}}
+ slotProps={{ root: { ['data-id']: 'rootId' }, img: { ['data-id']: 'imageId' } }}
/>;npx @mui/codemod@next v5.0.0/joy-avatar-remove-imgProps <path>Replace <TextField> with a composition of input components:
This change only affects Joy UI components.
-import TextField from '@mui/joy/TextField';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
-<TextField
- id="Id"
- label="Label"
- placeholder="Placeholder"
- helperText="Help!"
- name="Name"
- type="tel"
- autoComplete="on"
- autoFocus
- error
- required
- fullWidth
- defaultValue="DefaultValue"
- size="sm"
- color="primary"
- variant="outlined"
-/>
+<FormControl
+ id="Id"
+ required
+ size="sm"
+ color="primary">
+ <FormLabel>
+ Label
+ </FormLabel>
+ <JoyInput
+ placeholder="Placeholder"
+ name="Name"
+ type="tel"
+ autoComplete="on"
+ autoFocus
+ error
+ fullWidth
+ defaultValue="DefaultValue"
+ variant="outlined" />
+ <FormHelperText id="Id-helper-text">
+ Help!
+ </FormHelperText>
+</FormControl>npx @mui/codemod@next v5.0.0/joy-text-field-to-input <path>Renames the components and componentsProps props to slots and slotProps, respectively.
This change only affects Joy UI components.
<Autocomplete
- components={{ listbox: CustomListbox }}
- componentsProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
+ slots={{ listbox: CustomListbox }}
+ slotProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
/>;npx @mui/codemod@next v5.0.0/joy-rename-components-to-slots <path>The associated breaking change was done in #34997.
Rename the imports of Date and Time Pickers from @mui/lab to @mui/x-date-pickers and @mui/x-date-pickers-pro.
npx @mui/codemod@next v5.0.0/date-pickers-moved-to-x <path>Rename the imports of Tree View from @mui/lab to @mui/x-tree-view.
npx @mui/codemod@next v5.0.0/tree-view-moved-to-x <path>A combination of all important transformers for migrating v4 to v5.
npx @mui/codemod@next v5.0.0/preset-safe <path|folder>The list includes these transformers
adapter-v4autocomplete-rename-closeiconautocomplete-rename-optionavatar-circle-circularbadge-overlap-valuebox-borderradius-valuesbox-rename-cssbox-rename-gapbutton-color-propchip-variant-propcircularprogress-variantcollapse-rename-collapsedheightcore-styles-importcreate-themedialog-propsdialog-title-propsemotion-prepend-cacheexpansion-panel-componentfab-variantfade-rename-alphagrid-justify-justifycontentgrid-list-componenticon-button-sizematerial-ui-stylesmaterial-ui-typesmodal-propsmoved-lab-modulespagination-round-circularoptimal-importsroot-refskeleton-variantstyled-engine-providertable-propstabs-scroll-buttonstextarea-minmax-rowstheme-augmenttheme-breakpointstheme-breakpoints-widththeme-optionstheme-palette-modetheme-providertheme-spacingtheme-typography-roundtransitionsuse-autocompleteuse-transitionpropswith-mobile-dialogwith-widthmui-replace
Imports and inserts adaptV4Theme into createTheme() (or createMuiTheme)
+import { adaptV4Theme } from '@material-ui/core/styles';
-createTheme({ palette: { ... }})
+createTheme(adaptV4Theme({ palette: { ... }}))npx @mui/codemod@next v5.0.0/adapter-v4 <path>You can find more details about this breaking change in the migration guide.
Renames Autocomplete's closeIcon prop to clearIcon.
-<Autocomplete closeIcon={defaultClearIcon} />
+<Autocomplete clearIcon={defaultClearIcon} />npx @mui/codemod@next v5.0.0/autocomplete-rename-closeicon <path>You can find more details about this breaking change in the migration guide.
Renames Autocomplete's getOptionSelected to isOptionEqualToValue.
<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}
/>npx @mui/codemod@next v5.0.0/autocomplete-rename-option <path>You can find more details about this breaking change in the migration guide.
Updates the Avatar's variant value and classes key from 'circle' to 'circular'.
-<Avatar variant="circle" />
-<Avatar classes={{ circle: 'className' }} />
+<Avatar variant="circular" />
+<Avatar classes={{ circular: 'className' }} />npx @mui/codemod@next v5.0.0/avatar-circle-circular <path>You can find more details about this breaking change in the migration guide.
Renames the badge's props.
-<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">
<Badge classes={{
- anchorOriginTopRightRectangle: 'className',
- anchorOriginBottomRightRectangle: 'className',
- anchorOriginTopLeftRectangle: 'className',
- anchorOriginBottomLeftRectangle: 'className',
- anchorOriginTopRightCircle: 'className',
- anchorOriginBottomRightCircle: 'className',
- anchorOriginTopLeftCircle: 'className',
+ anchorOriginTopRightRectangular: 'className',
+ anchorOriginBottomRightRectangular: 'className',
+ anchorOriginTopLeftRectangular: 'className',
+ anchorOriginBottomLeftRectangular: 'className',
+ anchorOriginTopRightCircular: 'className',
+ anchorOriginBottomRightCircular: 'className',
+ anchorOriginTopLeftCircular: 'className',
}}>npx @mui/codemod@next v5.0.0/badge-overlap-value <path>You can find more details about this breaking change in the migration guide.
Renames the components and componentsProps props to slots and slotProps, respectively.
Also, changes slots' fields names to camelCase.
This change only affects Base UI components.
<BadgeUnstyled
- components={{ Root, Badge: CustomBadge }}
- componentsProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
+ slots={{ root: Root, badge: CustomBadge }}
+ slotProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
/>;npx @mui/codemod@next v5.0.0/base-rename-components-to-slots <path>The associated breaking change was done in #34693.
Updates the Box API from separate system props to sx.
-<Box borderRadius="borderRadius">
-<Box borderRadius={16}>
+<Box borderRadius={1}>
+<Box borderRadius="16px">npx @mui/codemod@next v5.0.0/box-borderradius-values <path>You can find more details about this breaking change in the migration guide.
Renames the Box css prop to sx
-<Box css={{ m: 2 }}>
+<Box sx={{ m: 2 }}>npx @mui/codemod@next v5.0.0/box-rename-css <path>You can find more details about this breaking change in the migration guide.
Renames the Box grid*Gap props.
-<Box gridGap={2}>Item 3</Box>
-<Box gridColumnGap={3}>Item 4</Box>
-<Box gridRowGap={4}>Item 5</Box>
+<Box gap={2}>Item 3</Box>
+<Box columnGap={3}>Item 4</Box>
+<Box rowGap={4}>Item 5</Box>npx @mui/codemod@next v5.0.0/box-rename-gap <path>You can find more details about this breaking change in the migration guide.
Removes the outdated color prop values.
-<Button color="default">
+<Button>npx @mui/codemod@next v5.0.0/button-color-prop <path>You can find more details about this breaking change in the migration guide.
Removes the Chip variant prop if the value is "default".
-<Chip variant="default">
+<Chip>npx @mui/codemod@next v5.0.0/chip-variant-prop <path>You can find more details about this breaking change in the migration guide.
Renames the CircularProgress static variant to determinate.
-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />npx @mui/codemod@next v5.0.0/circularprogress-variant <path>You can find more details about this breaking change in the migration guide.
Renames Collapse's collapsedHeight prop to collapsedSize.
-<Collapse collapsedHeight={40} />
-<Collapse classes={{ container: 'collapse' }} />
+<Collapse collapsedSize={40} />
+<Collapse classes={{ root: 'collapse' }} />npx @mui/codemod@next v5.0.0/collapse-rename-collapsedheight <path>You can find more details about this breaking change in the migration guide.
A generic codemod to rename any component prop.
-<Component prop="value" />
-<Component prop />
+<Component newProp="value" />
+<Component newProp />npx @mui/codemod@next v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newPropRenames private import from core/styles/* to core/styles
-import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
+import { darken, lighten } from '@material-ui/core/styles';npx @mui/codemod@next v5.0.0/core-styles-import <path>Renames the function createMuiTheme() to createTheme()
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';npx @mui/codemod@next v5.0.0/create-theme <path>Remove disableBackdropClick prop from <Dialog>
-<Dialog disableBackdropClick />
+<Dialog />npx @mui/codemod@next v5.0.0/dialog-props <path>You can find more details about this breaking change in the migration guide.
Remove disableTypography prop from <DialogTitle>
-<DialogTitle disableTypography />
+<DialogTitle />npx @mui/codemod@next v5.0.0/dialog-title-props <path>You can find more details about this breaking change in the migration guide.
Adds prepend: true to Emotion createCache
const cache = emotionCreateCache({
key: 'css',
+ prepend: true,
});npx @mui/codemod@next v5.0.0/create-theme <path>Renames ExpansionPanel* to Accordion*
npx @mui/codemod@next v5.0.0/expansion-panel-component <path>You can find more details about this breaking change in the migration guide.
-<Fab variant="round" />
+<Fab variant="circular" />npx @mui/codemod@next v5.0.0/fab-variant <path>You can find more details about this breaking change in the migration guide.
Renames the fade style utility import and calls to alpha().
-import { fade, lighten } from '@material-ui/core/styles';
+import { alpha, lighten } from '@material-ui/core/styles';
-const foo = fade('#aaa');
+const foo = alpha('#aaa');npx @mui/codemod@next v5.0.0/fade-rename-alpha <path>You can find more details about this breaking change in the migration guide.
Renames Grid's justify prop to justifyContent.
-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>npx @mui/codemod@next v5.0.0/grid-justify-justifycontent <path>You can find more details about this breaking change in the migration guide.
Renames GridList* to ImageList*
npx @mui/codemod@next v5.0.0/grid-list-component <path>You can find more details about this breaking change in the migration guide.
Adds size="large" if size is not defined to get the same appearance as v4.
-<IconButton size="medium" />
-<IconButton />
+<IconButton size="medium" />
+<IconButton size="large" />npx @mui/codemod@next v5.0.0/icon-button-size <path>You can find more details about this breaking change in the migration guide.
Replace JSS styling with makeStyles or withStyles to styled API.
import Typography from '@material-ui/core/Typography';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { styled } from '@material-ui/core/styles';
-const useStyles = makeStyles((theme) => ({
- root: {
- display: 'flex',
- alignItems: 'center',
- backgroundColor: theme.palette.primary.main
- },
- cta: {
- borderRadius: theme.shape.radius
- },
- content: {
- color: theme.palette.common.white,
- fontSize: 16,
- lineHeight: 1.7
- },
-}))
+const PREFIX = 'MyCard';
+const classes = {
+ root: `${PREFIX}-root`,
+ cta: `${PREFIX}-cta`,
+ content: `${PREFIX}-content`,
+}
+const Root = styled('div')((theme) => ({
+ [`&.${classes.root}`]: {
+ display: 'flex',
+ alignItems: 'center',
+ backgroundColor: theme.palette.primary.main
+ },
+ [`& .${classes.cta}`]: {
+ borderRadius: theme.shape.radius
+ },
+ [`& .${classes.content}`]: {
+ color: theme.palette.common.white,
+ fontSize: 16,
+ lineHeight: 1.7
+ },
+}))
export const MyCard = () => {
const classes = useStyles();
return (
- <div className={classes.root}>
+ <Root className={classes.root}>
<Typography className={classes.content}>...</Typography>
<Button className={classes.cta}>Go</Button>
- </div>
+ </Root>
)
}npx @mui/codemod@next v5.0.0/jss-to-styled <path>You can find more details about this breaking change in the migration guide.
Note: This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children. This codemod should be adopted after handling all breaking changes, check out the migration documentation.
Migrate JSS styling with makeStyles or withStyles to the corresponding tss-react API.
-import clsx from 'clsx';
-import {makeStyles, createStyles} from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles((theme) => createStyles<
- 'root' | 'small' | 'child', {color: 'primary' | 'secondary', padding: number}
->
-({
- root: ({color, padding}) => ({
+const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
+ root: {
padding: padding,
- '&:hover $child': {
+ [`&:hover .${classes.child}`]: {
backgroundColor: theme.palette[color].main,
}
- }),
+ },
small: {},
child: {
border: '1px solid black',
height: 50,
- '&$small': {
+ [`&.${classes.small}`]: {
height: 30
}
}
-}), {name: 'App'});
+}));
function App({classes: classesProp}: {classes?: any}) {
- const classes = useStyles({color: 'primary', padding: 30, classes: classesProp});
+ const { classes, cx } = useStyles({
+ color: 'primary',
+ padding: 30
+ }, {
+ props: {
+ classes: classesProp
+ }
+ });
return (
<div className={classes.root}>
<div className={classes.child}>
The Background take the primary theme color when the mouse hovers the parent.
</div>
- <div className={clsx(classes.child, classes.small)}>
+ <div className={cx(classes.child, classes.small)}>
The Background take the primary theme color when the mouse hovers the parent.
I am smaller than the other child.
</div>
</div>
);
}
export default App;npx @mui/codemod@next v5.0.0/jss-to-tss-react <path>The following scenarios are not currently handled by this codemod and will be marked with a "TODO jss-to-tss-react codemod" comment:
- If the hook returned by
makeStyles(for exampleuseStyles) is exported and used in another file, the usages in other files will not be converted. - Arrow functions as the value for a CSS prop will not be converted. Arrow functions are supported at the rule level, though with some caveats listed below.
- In order for arrow functions at the rule level to be converted, the parameter must use object
destructuring (for example
root: ({color, padding}) => (...)). If the parameter is not destructured (for exampleroot: (props) => (...)), it will not be converted. - If an arrow function at the rule level contains a code block (that is contains an explicit
returnstatement) rather than just an object expression, it will not be converted.
You can find more details about migrating from JSS to tss-react in the migration guide.
Apply underline="hover" to <Link /> that does not define underline prop (to get the same behavior as in v4).
-<Link />
+<Link underline="hover" />npx @mui/codemod@next v5.0.0/link-underline-hover <path>You can find more details about this breaking change in the migration guide.
Moves JSS imports to @material-ui/styles
-import {
- createGenerateClassName,
- createStyles,
- jssPreset,
- makeStyles,
- ServerStyleSheets,
- useThemeVariants,
- withStyles,
- withTheme,
- ThemeProvider,
- styled,
- getStylesCreator,
- mergeClasses,
-} from '@material-ui/core/styles';
+import { ThemeProvider, styled } from '@material-ui/core/styles';
+import createGenerateClassName from '@material-ui/styles/createGenerateClassName';
+import createStyles from '@material-ui/styles/createStyles';
+import jssPreset from '@material-ui/styles/jssPreset';
+import makeStyles from '@material-ui/styles/makeStyles';
+import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets';
+import useThemeVariants from '@material-ui/styles/useThemeVariants';
+import withStyles from '@material-ui/styles/withStyles';
+import withTheme from '@material-ui/styles/withTheme';
+import getStylesCreator from '@material-ui/styles/getStylesCreator';
import mergeClasses from '@material-ui/styles/mergeClasses';npx @mui/codemod@next v5.0.0/material-ui-styles <path>Renames Omit import from @material-ui/types to DistributiveOmit
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';npx @mui/codemod@next v5.0.0/material-ui-types <path>You can find more details about this breaking change in the migration guide.
Removes disableBackdropClick and onEscapeKeyDown from <Modal>
<Modal
- disableBackdropClick
- onEscapeKeyDown={handleEscapeKeyDown}
/>npx @mui/codemod@next v5.0.0/modal-props <path>You can find more details about this breaking change in the migration guide.
Updates all imports for @material-ui/lab components that have moved to @material-ui/core.
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';or
-import { SpeedDial } from '@material-ui/lab';
+import { SpeedDial } from '@material-ui/core';npx @mui/codemod@next v5.0.0/moved-lab-modules <path>You can find more details about this breaking change in the migration guide.
Renames Pagination*'s shape values from 'round' to 'circular'.
-<Pagination shape="round" />
-<PaginationItem shape="round" />
+<Pagination shape="circular" />
+<PaginationItem shape="circular" />npx @mui/codemod@next v5.0.0/pagination-round-circular <path>You can find more details about this breaking change in the migration guide.
Converts all @mui/material & @mui/icons-material top-level imports to path imports (essentially the reverse of top-level-imports, with the addition of @mui/icons-material):
-import { List, Grid } from '@mui/material';
+import List from '@mui/material/List';
+import Grid from '@mui/material/Grid';
-import { Delete, People as PeopleIcon } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import PeopleIcon from '@mui/icons-material/People';npx @mui/codemod@next v5.0.0/path-imports <path>Head to https://mui.com/material-ui/guides/minimizing-bundle-size/ to understand when it's useful.
Fix private import paths.
-import red from '@material-ui/core/colors/red';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { red } from '@material-ui/core/colors';
+import { createTheme } from '@material-ui/core/styles';npx @mui/codemod@next v5.0.0/optimal-imports <path>Removes RootRef from the codebase.
npx @mui/codemod@next v5.0.0/root-ref <path>You can find more details about this breaking change in the migration guide.
-<Skeleton variant="circle" />
-<Skeleton variant="rect" />
+<Skeleton variant="circular" />
+<Skeleton variant="rectangular" />npx @mui/codemod@next v5.0.0/skeleton-variant <path>You can find more details about this breaking change in the migration guide.
Applies StyledEngineProvider to the files that contains ThemeProvider.
npx @mui/codemod@next v5.0.0/styled-engine-provider <path>You can find more details about this breaking change in the migration guide.
Renames props in Table* components.
-<>
- <TablePagination onChangeRowsPerPage={() => {}} onChangePage={() => {}} />
- <TablePagination classes={{ input: 'foo' }} />
- <Table padding="default" />
- <TableCell padding="default" />
-</>
+<>
+ <TablePagination onRowsPerPageChange={() => {}} onPageChange={() => {}} />
+ <TablePagination classes={{ select: 'foo' }} />
+ <Table padding="normal" />
+ <TableCell padding="normal" />
+</>
npx @mui/codemod@next v5.0.0/table-props <path>You can find more details about this breaking change in the migration guide.
Renames the Tabs's scrollButtons prop values.
-<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />npx @mui/codemod@next v5.0.0/tabs-scroll-buttons <path>You can find more details about this breaking change in the migration guide.
Renames TextField's rows props.
-<TextField rowsMin={3} rowsMax={6} />
-<TextareaAutosize rows={2} />
-<TextareaAutosize rowsMin={3} rowsMax={6} />
+<TextField minRows={3} maxRows={6} />
+<TextareaAutosize minRows={2} />
+<TextareaAutosize minRows={3} maxRows={6} />npx @mui/codemod@next v5.0.0/textarea-minmax-rows <path>You can find more details about this breaking change in the migration guide.
Adds DefaultTheme module augmentation to TypeScript projects.
npx @mui/codemod@next v5.0.0/theme-augment <path>You can find more details about this breaking change in the migration guide.
Updates breakpoint values to match new logic.
-theme.breakpoints.down('sm')
-theme.breakpoints.between('sm', 'md')
+theme.breakpoints.down('md')
+theme.breakpoints.between('sm', 'lg')npx @mui/codemod@next v5.0.0/theme-breakpoints <path>You can find more details about this breaking change in the migration guide.
Renames theme.breakpoints.width('md') to theme.breakpoints.values.md.
npx @mui/codemod@next v5.0.0/theme-breakpoints-width <path>You can find more details about this breaking change in the migration guide.
-import { ThemeOptions } from '@material-ui/core';
+import { DeprecatedThemeOptions } from '@material-ui/core';npx @mui/codemod@next v5.0.0/theme-options <path>Renames type to mode.
{
palette: {
- type: 'dark',
+ mode: 'dark',
},
}-theme.palette.type === 'dark'
+theme.palette.mode === 'dark'npx @mui/codemod@next v5.0.0/theme-palette-mode <path>You can find more details about this breaking change in the migration guide.
Renames MuiThemeProvider to ThemeProvider.
npx @mui/codemod@next v5.0.0/theme-provider <path>You can find more details about this breaking change in the migration guide.
Removes the 'px' suffix from some template strings.
-`${theme.spacing(2)}px`
-`${theme.spacing(2)}px ${theme.spacing(4)}px`
+`${theme.spacing(2)}`
+`${theme.spacing(2)} ${theme.spacing(4)}`npx @mui/codemod@next v5.0.0/theme-spacing <path>You can find more details about this breaking change in the migration guide.
Renames theme.typography.round($number) to Math.round($number * 1e5) / 1e5.
-`${theme.typography.round($number)}`
+`${Math.round($number * 1e5) / 1e5}`npx @mui/codemod@next v5.0.0/theme-typography-round <path>You can find more details about this breaking change in the migration guide.
Converts all @mui/material submodule imports to the root module:
-import List from '@mui/material/List';
-import Grid from '@mui/material/Grid';
+import { List, Grid } from '@mui/material';npx @mui/codemod@next v5.0.0/top-level-imports <path>Head to https://mui.com/material-ui/guides/minimizing-bundle-size/ to understand when it's useful.
Renames import transitions to createTransitions
npx @mui/codemod@next v5.0.0/transitions <path>Renames useAutocomplete related import from lab to core
-import useAutocomplete from '@material-ui/lab/useAutocomplete';
+import useAutocomplete from '@material-ui/core/useAutocomplete';npx @mui/codemod@next v5.0.0/use-autocomplete <path>Updates Dialog, Menu, Popover, and Snackbar to use the TransitionProps prop to replace the onEnter* and onExit* props.
<Dialog
- onEnter={onEnter}
- onEntered={onEntered}
- onEntering={onEntering}
- onExit={onExit}
- onExited={onExited}
- onExiting={onExiting}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>npx @mui/codemod@next v5.0.0/use-transitionprops <path>You can find more details about this breaking change in the migration guide.
Don't run this codemod if you already set
varianttooutlinedorfilledin theme default props.
Adds the TextField, Select, and FormControl's variant="standard" prop when variant is undefined.
The diff should look like this:
-<TextField value="Standard" />
+<TextField value="Standard" variant="standard" />-<Select value="Standard" />
+<Select value="Standard" variant="standard" />-<FormControl value="Standard" />
+<FormControl value="Standard" variant="standard" />npx @mui/codemod@next v5.0.0/variant-prop <path>Removes imported withMobileDialog, and inserts hardcoded version to prevent application crash.
-import withMobileDialog from '@material-ui/core/withMobileDialog';
+// FIXME checkout https://mui.com/material-ui/migration/v5-component-changes/#dialog
+const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;npx @mui/codemod@next v5.0.0/with-mobile-dialog <path>You can find more details about this breaking change in the migration guide.
Removes withWidth import, and inserts hardcoded version to prevent application crash.
-import withWidth from '@material-ui/core/withWidth';
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;npx @mui/codemod@next v5.0.0/with-width <path>You can find more details about this breaking change in the migration guide.
Replace every occurrence of material-ui related package with the new package names (listed below) except these packages (@material-ui/pickers, @material-ui/data-grid, @material-ui/x-grid & @material-ui/x-grid-data-generator). More details about why package names are changed
Material Design components
-import Alert from '@material-ui/core/Alert';
+import Alert from '@mui/material/Alert';JSS styles package
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';System package
-import { SxProps } from '@material-ui/system';
+import { SxProps } from '@mui/system';Utilities package
-import { deepmerge } from '@material-ui/utils';
+import { deepmerge } from '@mui/utils';Lab
-import Mansory from '@material-ui/lab/Mansory';
+import Mansory from '@mui/lab/Mansory';Dependencies
// package.json
-"@material-ui/core": "next",
-"@material-ui/icons": "next",
-"@material-ui/lab": "next",
-"@material-ui/unstyled": "next",
-"@material-ui/styled-engine-sc": "next",
+"@mui/material": "next",
+"@mui/icons-material": "next",
+"@mui/lab": "next",
+"@mui/base": "next",
+"@mui/styled-engine-sc": "next",npx @mui/codemod@next v5.0.0/mui-replace <path>You can find more details about this breaking change in the migration guide.
Updates the theme-spacing-api from theme.spacing.unit x to theme.spacing(x).
The diff should look like this:
-const spacing = theme.spacing.unit;
+const spacing = theme.spacing(1);npx @mui/codemod@next v4.0.0/theme-spacing-api <path>This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.
-const spacing = theme.spacing.unit / 5;
+const spacing = theme.spacing(0.2);
// Limitation
-const spacing = theme.spacing.unit * 5 * 5;
+const spacing = theme.spacing(5) * 5;Converts all @material-ui/core imports more than 1 level deep to the optimal form for tree shaking:
-import withStyles from '@material-ui/core/styles/withStyles';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { withStyles, createTheme } from '@material-ui/core/styles';npx @mui/codemod@next v4.0.0/optimal-imports <path>Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
Converts all @material-ui/core submodule imports to the root module:
-import List from '@material-ui/core/List';
-import { withStyles } from '@material-ui/core/styles';
+import { List, withStyles } from '@material-ui/core';npx @mui/codemod@next v4.0.0/top-level-imports <path>Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
Updates the import-paths for the new location of the components.
Material UI v1.0.0 flatten the import paths.
The diff should look like this:
-import { MenuItem } from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';npx @mui/codemod@next v1.0.0/import-path <path>Notice: if you are migrating from pre-v1.0, and your imports use material-ui, you will need to manually find and replace all references to material-ui in your code to @material-ui/core. E.g.:
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';Subsequently, you can run the above find ... command to flatten your imports.
Updates the color-imports for the new location of Material UI color palettes.
The diff should look like this:
-import { blue, teal500 } from 'material-ui/styles/colors';
+import blue from '@material-ui/core/colors/blue';
+import teal from '@material-ui/core/colors/teal';
+const teal500 = teal['500'];npx @mui/codemod@next v1.0.0/color-imports <path>additional options
npx @mui/codemod@next v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'Updates the svg-icons import paths from material-ui/svg-icons/<category>/<icon-name> to @material-ui/icons/<IconName>, to use the new @material-ui/icons package.
The diff should look like this:
-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';
-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';
+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';npx @mui/codemod@next v1.0.0/svg-icon-imports <path>Updates MenuItem with primaryText property making its value tag's child.
The diff should look like this:
-<MenuItem primaryText="Profile" />
-<MenuItem primaryText={"Profile" + "!"} />
+<MenuItem>Profile</MenuItem>
+<MenuItem>{"Profile" + "!"}</MenuItem>npx @mui/codemod@next v1.0.0/menu-item-primary-text <path>Updates the import-paths for the new location of the components.
Material UI v0.15.0 is reorganizing the folder distribution of the project.
The diff should look like this:
// From the source
-import FlatButton from 'material-ui/src/flat-button';
+import FlatButton from 'material-ui/src/FlatButton';
// From npm
-import RaisedButton from 'material-ui/lib/raised-button';
+import RaisedButton from 'material-ui/RaisedButton';npx @mui/codemod@next v0.15.0/import-path <path>