mui@mui/codemod
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.
Setup & run
npx @mui/codemod <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@latest v4.0.0/theme-spacing-api src
npx @mui/codemod@latest v5.0.0/component-rename-prop src --
--component=Grid --from=prop --to=newProp
npx @mui/codemod@latest v5.0.0/preset-safe src --parser=flowpackage name
Use this flag if you have a custom package name that reexports Material UI components. For example:
npx @mui/codemod@latest --packageName="@org/ui"The snippet above will look for @org/ui instead of @mui/material in the codemod.
jscodeshift options
To pass more options directly to jscodeshift, use --jscodeshift="...". For example:
npx @mui/codemod@latest --jscodeshift="--run-in-band --verbose=2"See all available options here.
Recast Options
Options to recast's printer can be provided
through jscodeshift's printOptions command line argument
npx @mui/codemod@latest <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"Included scripts
Deprecations
npx @mui/codemod@latest deprecations/all <path>all
A combination of all deprecations.
accordion-props
<Accordion
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>npx @mui/codemod@latest deprecations/accordion-props <path>accordion-summary-classes
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@latest deprecations/accordion-summary-classes <path>alert-classes
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@latest deprecations/alert-classes <path>alert-props
<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@latest deprecations/alert-props <path>autocomplete-props
<Autocomplete
- ChipProps={{ height: 10 }}
- PaperComponent={CustomPaper}
- PopperComponent={CustomPopper}
- ListboxComponent={CustomListbox}
- ListboxProps={{ height: 12 }}
- 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 },
+ }}
/> MuiAutocomplete: {
defaultProps: {
- ChipProps: { height: 10 },
- PaperComponent: CustomPaper,
- PopperComponent: CustomPopper,
- ListboxComponent: CustomListbox,
- ListboxProps: { height: 12 },
- 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 },
+ },
},
},npx @mui/codemod@latest deprecations/autocomplete-props <path>avatar-group-props
<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@latest deprecations/avatar-group-props <path>avatar-props
<Avatar
- imgProps={{
- onError: () => {},
- onLoad: () => {},
+ slotProps={{
+ img: {
+ onError: () => {},
+ onLoad: () => {},
+ },
}}
/>npx @mui/codemod@latest deprecations/avatar-props <path>backdrop-props
<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@latest deprecations/backdrop-props <path>badge-props
<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@latest deprecations/badge-props <path>button-classes
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@latest deprecations/button-classes <path>button-group-classes
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@latest deprecations/button-group-classes <path>chip-classes
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@latest deprecations/chip-classes <path>circular-progress-classes
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@latest deprecations/circular-progress-classes <path>divider-props
<Divider
- light
+ sx={{ opacity: 0.6 }}
/>npx @mui/codemod@latest deprecations/divider-props <path>dialog-classes
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@latest deprecations/dialog-classes <path>drawer-classes
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@latest deprecations/drawer-classes <path>filled-input-props
<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@latest deprecations/filled-input-props <path>form-control-label-props
<FormControlLabel
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
/> MuiFormControlLabel: {
defaultProps: {
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
},
},npx @mui/codemod@latest deprecations/form-control-label-props <path>
list-item-props
<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@latest deprecations/list-item-props <path>list-item-text-props
<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@latest deprecations/list-item-text-props <path>image-list-item-bar-classes
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@latest deprecations/image-list-item-bar-classes <path>input-base-props
<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@latest deprecations/input-base-props <path>input-base-classes
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@latest deprecations/input-base-classes <path>input-props
<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@latest deprecations/input-props <path>linear-progress-classes
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@latest deprecations/linear-progress-classes <path>modal-props
<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@latest deprecations/modal-props <path>mobile-stepper-props
<MobileStepper
- LinearProgressProps={{ color: 'primary' }}
+ slotProps={{ progress: { color: 'primary' } }}
/>npx @mui/codemod@latest deprecations/mobile-stepper-props <path>pagination-item-classes
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@latest deprecations/pagination-item-classes <path>pagination-item-props
<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@latest deprecations/pagination-item-props <path>popper-props
<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@latest deprecations/popper-props <path>outlined-input-props
<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@latest deprecations/outlined-input-props <path>rating-props
<Rating
- IconContainerComponent={CustomContainer}
+ slots={{
+ icon: { component: CustomContainer }
+ }}
/>npx @mui/codemod deprecations/rating-props <path>select-classes
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@latest deprecations/select-classes <path>slider-props
<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@latest deprecations/slider-props <path>snackbar-props
<Snackbar
- ClickAwayListenerProps={CustomClickAwayListenerProps}
- ContentProps={CustomContentProps}
- TransitionComponent={CustomTransition}
- TransitionProps={CustomTransitionProps}
+ slots={{ transition: CustomTransition }}
+ slotProps={{
+ clickAwayListener: CustomClickAwayListenerProps,
+ content: CustomContentProps,
+ transition: CustomTransitionProps
+ }}
/>npx @mui/codemod deprecations/snackbar-props <path>slider-classes
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@latest deprecations/slider-classes <path>tooltip-props
<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@latest deprecations/tooltip-props <path>step-connector-classes
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 deprecations/step-connector-classes <path>step-content-props
<StepContent
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>npx @mui/codemod@latest deprecations/step-content-props <path>step-label-props
<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@latest deprecations/step-label-props <path>text-field-props
<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@latest deprecations/text-field-props <path>toggle-button-group-classes
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@latest deprecations/toggle-button-group-classes <path>tab-classes
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@latest deprecations/tab-classes <path>table-sort-label-classes
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@latest deprecations/table-sort-label-classes <path>typography-props
<Typography
- paragraph
+ sx={{ marginBottom: '16px' }}
/> <Typography
- paragraph={isTypographyParagraph}
+ sx={isTypographyParagraph ? { marginBottom: '16px' } : undefined}
/> MuiTypography: {
defaultProps: {
- paragraph: true
+ sx: { marginBottom: '16px' },
},
},npx @mui/codemod@latest deprecations/typography-props <path>v7.0.0
grid-props
npx @mui/codemod 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 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 }} >lab-removed-components
npx @mui/codemod 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';input-label-size-normal-medium
Updates the InputLabel's size value from normal to medium.
-<InputLabel size="normal">Label</InputLabel>
+<InputLabel size="medium">Label</InputLabel>npx @mui/codemod v7.0.0/input-label-size-normal-medium <path>You can find more details about this breaking change in the migration guide.
v6.0.0
sx-prop
npx @mui/codemod@latest 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]
+ })
+ })}
/>system-props
npx @mui/codemod@latest 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' }} />theme-v6
npx @mui/codemod@latest 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
`diff
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: { co