@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

``bash
npx @mui/codemod

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=flow
`

$3

Use this flag if you have a custom package name that reexports Material UI components. For example:

`bash
npx @mui/codemod@latest --packageName="@org/ui"
`

The snippet above will look for @org/ui instead of @mui/material in the codemod.

$3

To pass more options directly to jscodeshift, use --jscodeshift="...". For example:

`bash
npx @mui/codemod@latest --jscodeshift="--run-in-band --verbose=2"
`

See all available options here.

$3

Options to recast's printer can be provided
through jscodeshift's printOptions command line argument

`bash
npx @mui/codemod@latest --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
`

Included scripts

- Deprecations
- v7
- v6
- v5
- v4
- v1
- v0.15

$3

`bash
npx @mui/codemod@latest deprecations/all
`

#### all

A combination of all deprecations.

#### accordion-props

`diff
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
`

`bash
npx @mui/codemod@latest deprecations/accordion-props
`

#### accordion-summary-classes

JS transforms:

`diff
import { accordionSummaryClasses } from '@mui/material/AccordionSummary';

MuiAccordionSummary: {
styleOverrides: {
root: {
- [& .${accordionSummaryClasses.contentGutters}]: {
+ [&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}]: {
color: 'red',
},
},
},
},
`

`diff
MuiAccordionSummary: {
styleOverrides: {
root: {
- '& .MuiAccordionSummary-contentGutters': {
+ '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
color: 'red',
},
},
},
},
`

CSS transforms:

`diff
-.MuiAccordionSummary-root .MuiAccordionSummary-contentGutters
+.MuiAccordionSummary-root.MuiAccordionSummary-gutters .MuiAccordionSummary-content
`

`bash
npx @mui/codemod@latest deprecations/accordion-summary-classes
`

#### alert-classes

JS transforms:

`diff
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:

`diff
-.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-colorError
`

`bash
npx @mui/codemod@latest deprecations/alert-classes
`

#### alert-props

`diff
- components={{ CloseButton: CustomButton }}
- componentsProps={{ closeButton: { testid: 'test-id' } }}
+ slots={{ closeButton: CustomButton }}
+ slotProps={{ closeButton: { testid: 'test-id' } }}
/>
`

`diff
MuiAlert: {
defaultProps: {
- components: { CloseButton: CustomButton }
- componentsProps: { closeButton: { testid: 'test-id' }}
+ slots: { closeButton: CustomButton },
+ slotProps: { closeButton: { testid: 'test-id' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/alert-props
`

#### autocomplete-props

`diff
- 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 },
+ }}
/>
`

`diff
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 },
+ },
},
},
`

`bash
npx @mui/codemod@latest deprecations/autocomplete-props
`

#### avatar-group-props

`diff
- componentsProps={{
- additionalAvatar: { color: 'red' },
+ slotProps={{
+ surplus: { color: 'red' },
}}
/>
`

`diff
slotProps={{
- additionalAvatar: { color: 'red' },
+ surplus: { color: 'red' },
}}
/>
`

`diff
MuiAvatarGroup: {
defaultProps: {
- componentsProps: {
- additionalAvatar: { color: 'red' },
+ slotProps: {
+ surplus: { color: 'red' },
},
},
},
`

`diff
MuiAvatarGroup: {
defaultProps: {
slotProps: {
- additionalAvatar: { color: 'red' },
+ surplus: { color: 'red' },
},
},
},
`

`bash
npx @mui/codemod@latest deprecations/avatar-group-props
`

#### avatar-props

`diff
- imgProps={{
- onError: () => {},
- onLoad: () => {},
+ slotProps={{
+ img: {
+ onError: () => {},
+ onLoad: () => {},
+ },
}}
/>
`

`bash
npx @mui/codemod@latest deprecations/avatar-props
`

#### backdrop-props

`diff
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
`

`diff
MuiBackdrop: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'root-id' } }
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'root-id' } },
},
},
`

`diff
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
/>
`

`bash
npx @mui/codemod@latest deprecations/backdrop-props
`

#### badge-props

`diff
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
`

`diff
MuiBadge: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/badge-props
`

#### button-classes

JS transforms:

`diff
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:

`diff
-.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-icon
`

`bash
npx @mui/codemod@latest deprecations/button-classes
`

#### button-group-classes

JS transforms:

`diff
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:

`diff
-.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-grouped
`

`bash
npx @mui/codemod@latest deprecations/button-group-classes
`

#### chip-classes

JS transforms:

`diff
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:

`diff
-.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-deleteIcon
`

`bash
npx @mui/codemod@latest deprecations/chip-classes
`

#### circular-progress-classes

JS transforms:

`diff
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:

`diff
-.MuiCircularProgress-circleDeterminate
+.MuiCircularProgress-determinate > .MuiCircularProgress-circle
`

`diff
-.MuiCircularProgress-circleIndeterminate
+.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle
`

`bash
npx @mui/codemod@latest deprecations/circular-progress-classes
`

#### divider-props

`diff
- light
+ sx={{ opacity: 0.6 }}
/>
`

`bash
npx @mui/codemod@latest deprecations/divider-props
`

#### dialog-classes

JS transforms:

`diff
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:

`diff
-.MuiDialog-root .MuiDialog-paperScrollBody
+.MuiDialog-root .MuiDialog-scrollBody > .MuiDialog-paper
-.MuiDialog-root .MuiDialog-paperScrollPaper
+.MuiDialog-root .MuiDialog-scrollPaper > .MuiDialog-paper
`

`bash
npx @mui/codemod@latest deprecations/dialog-classes
`

#### dialog-props

JS transforms:

`diff
- PaperProps={paperProps}
+ slotProps={{ paper: paperProps }}
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
- TransitionProps={CustomTransitionProps}
+ slotProps={{ transition: CustomTransitionProps }}
/>
},
},
},
`

`bash
npx @mui/codemod@latest deprecations/dialog-props
`

#### drawer-classes

JS transforms:

`diff
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:

`diff
-.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-paper
`

`bash
npx @mui/codemod@latest deprecations/drawer-classes
`

#### filled-input-props

`diff
- 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' } }}
/>
`

`diff
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' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/filled-input-props
`

#### form-control-label-props

`diff
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
/>
`

`diff
MuiFormControlLabel: {
defaultProps: {
- componentsProps={{ typography: typographyProps }}
+ slotProps={{ typography: typographyProps }}
},
},
`

`bash
npx @mui/codemod@latest deprecations/form-control-label-props

`

#### list-item-props

`diff
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
`

`diff
MuiListItem: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/list-item-props
`

#### list-item-text-props

`diff
- primaryTypographyProps={primaryTypographyProps}
+ slotProps={{ primary: primaryTypographyProps }}
- secondaryTypographyProps={secondaryTypographyProps}
+ slotProps={{ secondary: secondaryTypographyProps }}
/>
`

`diff
MuiListItemText: {
defaultProps: {
- primaryTypographyProps:primaryTypographyProps
+ slotProps:{ primary: primaryTypographyProps }
- secondaryTypographyProps:secondaryTypographyProps
+ slotProps:{ secondary: secondaryTypographyProps }
},
},
`

`bash
npx @mui/codemod@latest deprecations/list-item-text-props
`

#### image-list-item-bar-classes

JS transforms:

`diff
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:

`diff
- .MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
`

`diff
- .MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
`

`diff
- .MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
`

`diff
- .MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
`

`bash
npx @mui/codemod@latest deprecations/image-list-item-bar-classes
`

#### input-base-props

`diff
- 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' } }}
/>
`

`diff
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' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/input-base-props
`

#### input-base-classes

JS transforms:

`diff
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:

`diff
-.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-input
`

`bash
npx @mui/codemod@latest deprecations/input-base-classes
`

#### input-props

`diff
- 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' } }}
/>
`

`diff
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' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/input-props
`

#### linear-progress-classes

JS transforms:

`diff
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:

`diff
-.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-dashed
`

`bash
npx @mui/codemod@latest deprecations/linear-progress-classes
`

#### modal-props

`diff
- 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' } }}
/>
`

`diff
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' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/modal-props
`

#### mobile-stepper-props

`diff
- LinearProgressProps={{ color: 'primary' }}
+ slotProps={{ progress: { color: 'primary' } }}
/>
`

`bash
npx @mui/codemod@latest deprecations/mobile-stepper-props
`

#### pagination-item-classes

JS transforms:

`diff
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:

`diff
-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-primary
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-secondary
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-primary
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-secondary
`

`bash
npx @mui/codemod@latest deprecations/pagination-item-classes
`

#### pagination-item-props

`diff
- components={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
+ slots={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
/>
`

`diff
MuiPaginationItem: {
defaultProps: {
- components: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
+ slots: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
},
},
`

`bash
npx @mui/codemod@latest deprecations/pagination-item-props
`

#### popper-props

`diff
- components={{ Root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slots={{ root: CustomRoot }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
`

`diff
MuiPopper: {
defaultProps: {
- components: { Root: CustomRoot }
- componentsProps: { root: { testid: 'test-id' }}
+ slots: { root: CustomRoot },
+ slotProps: { root: { testid: 'test-id' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/popper-props
`

#### outlined-input-props

`diff
- 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' } }}
/>
`

`diff
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' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/outlined-input-props
`

#### rating-props

`diff
- IconContainerComponent={CustomContainer}
+ slots={{
+ icon: { component: CustomContainer }
+ }}
/>
`

`bash
npx @mui/codemod deprecations/rating-props
`

#### select-classes

JS transforms:

`diff
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:

`diff
- .MuiSelect-iconFilled
+ .MuiSelect-filled ~ .MuiSelect-icon
`

`diff
- .MuiSelect-iconOutlined
+ .MuiSelect-outlined ~ .MuiSelect-icon
`

`diff
- .MuiSelect-iconStandard
+ .MuiSelect-standard ~ .MuiSelect-icon
`

`bash
npx @mui/codemod@latest deprecations/select-classes
`

#### slider-props

`diff
- components={{ Track: CustomTrack }}
- componentsProps={{ track: { testid: 'test-id' } }}
+ slots={{ track: CustomTrack }}
+ slotProps={{ track: { testid: 'test-id' } }}
/>
`

`diff
MuiSlider: {
defaultProps: {
- components: { Track: CustomTrack }
- componentsProps: { track: { testid: 'test-id' }}
+ slots: { track: CustomTrack },
+ slotProps: { track: { testid: 'test-id' } },
},
},
`

`bash
npx @mui/codemod@latest deprecations/slider-props
`

#### snackbar-props

`diff
- ClickAwayListenerProps={CustomClickAwayListenerProps}
- ContentProps={CustomContentProps}
- TransitionComponent={CustomTransition}
- TransitionProps={CustomTransitionProps}
+ slots={{ transition: CustomTransition }}
+ slotProps={{
+ clickAwayListener: CustomClickAwayListenerProps,
+ content: CustomContentProps,
+ transition: CustomTransitionProps
+ }}
/>
`

`bash
npx @mui/codemod deprecations/snackbar-props
`

#### slider-classes

JS transforms:

`diff
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:

`diff
-.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-thumb
`

`bash
npx @mui/codemod@latest deprecations/slider-classes
`

#### tooltip-props

`diff
- 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,
+ }}
/>
`

`diff
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,
+ },
},
},
`

`bash
npx @mui/codemod@latest deprecations/tooltip-props
`

#### step-connector-classes

JS transforms:

`diff
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:

`diff
-.MuiStepConnector-lineHorizontal
+.MuiStepConnector-horizontal > .MuiStepConnector-line
`

`diff
-.MuiStepConnector-lineVertical
+.MuiStepConnector-vertical > .MuiStepConnector-line
`

`bash
npx @mui/codemod deprecations/step-connector-classes
`

#### step-content-props

`diff
- TransitionComponent={CustomTransition}
- TransitionProps={{ unmountOnExit: true }}
+ slots={{ transition: CustomTransition }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
`

`bash
npx @mui/codemod@latest deprecations/step-content-props
`

#### step-label-props

`diff
- componentsProps={{ label: labelProps }}
+ slotProps={{ label: labelProps }}
- StepIconComponent={StepIconComponent}
+ slots={{ stepIcon: StepIconComponent }}
- StepIconProps={StepIconProps}
+ slotProps={{ stepIcon: StepIconProps }}
/>
`

`diff
MuiStepLabel: {
defaultProps: {
- componentsProps:{ label: labelProps }
+ slotProps:{ label: labelProps }
- StepIconComponent:StepIconComponent
+ slots:{ stepIcon: StepIconComponent }
- StepIconProps:StepIconProps
+ slotProps:{ stepIcon: StepIconProps }
},
},
`

`bash
npx @mui/codemod@latest deprecations/step-label-props
`

#### text-field-props

`diff
- InputProps={CustomInputProps}
- inputProps={CustomHtmlInputProps}
- SelectProps={CustomSelectProps}
- InputLabelProps={CustomInputLabelProps}
- FormHelperTextProps={CustomFormHelperProps}
+ slotProps={{
+ input: CustomInputProps,
+ htmlInput: CustomHtmlInputProps,
+ select: CustomSelectProps,
+ inputLabel: CustomInputLabelProps,
+ formHelper: CustomFormHelperProps,
+ }}
/>
`

`bash
npx @mui/codemod@latest deprecations/text-field-props
`

#### toggle-button-group-classes

JS transforms:

`diff
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:

`diff
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
`

`diff
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
`

`bash
npx @mui/codemod@latest deprecations/toggle-button-group-classes
`

#### tab-classes

JS transforms:

`diff
import { tabClasses } from '@mui/material/Tab';

MuiTab: {
styleOverrides: {
root: {
- [& .${tabClasses.iconWrapper}]: {
+ [& .${tabClasses.icon}]: {
color: 'red',
},
},
},
},
`

CSS transforms:

`diff
-.MuiTab-iconWrapper
+.MuiTab-icon
`

`bash
npx @mui/codemod@latest deprecations/tab-classes
`

#### table-sort-label-classes

JS transforms:

`diff
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:

`diff
-.MuiTableSortLabel-iconDirectionDesc
+.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon
`

`diff
-.MuiTableSortLabel-iconDirectionAsc
+.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon
`

`bash
npx @mui/codemod@latest deprecations/table-sort-label-classes
`

#### typography-props

`diff
- paragraph
+ sx={{ marginBottom: '16px' }}
/>
`

`diff
- paragraph={isTypographyParagraph}
+ sx={isTypographyParagraph ? { marginBottom: '16px' } : undefined}
/>
`

`diff
MuiTypography: {
defaultProps: {
- paragraph: true
+ sx: { marginBottom: '16px' },
},
},
`

`bash
npx @mui/codemod@latest deprecations/typography-props
`

$3

#### theme-color-functions

`bash
npx @mui/codemod@latest v7.0.0/theme-color-functions
`

Replace the usage of the alpha(), lighten(), and darken() functions from @mui/system/colorManipulator to use the theme object instead.

`diff
- 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)
`

#### grid-props

`bash
npx @mui/codemod v7.0.0/grid-props
`

Updates the usage of the @mui/material/Grid, @mui/system/Grid, and @mui/joy/Grid components to their updated APIs.

`diff
- 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.

`bash
npx @mui/codemod v7.0.0/grid-props --jscodeshift='--muiBreakpoints=mobile,desktop'
`

`diff
-
+
`

#### lab-removed-components

`bash
npx @mui/codemod v7.0.0/lab-removed-components
`

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:

`diff
- import { Alert } from '@mui/lab';
+ import { Alert } from '@mui/material';
`

As well as default and named imports from component-level files:

`diff
- 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.

`diff
-Label
+Label
`

`bash
npx @mui/codemod v7.0.0/input-label-size-normal-medium
`

You can find more details about this breaking change in the migration guide.

$3

#### sx-prop

`bash
npx @mui/codemod@latest v6.0.0/sx-prop
`

Update the usage of the sx prop to be compatible with @pigment-css/react.

`diff
- 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

`bash
npx @mui/codemod@latest v6.0.0/system-props
`

Remove system props and add them to the sx prop.

`diff
-
+
`

#### theme-v6

`bash
npx @mui/codemod@latest v6.0.0/theme-v6
`

Update the theme creation from @mui/system@v5 to be compatible with @pigment-css/react.

- replace palette mode conditional with theme.applyStyles()
- replace ownerState with variants
- move theme variants to the root slot

``diff
createTheme({
components: {
MuiButton: {
- variants: [
- {
- props: { color: 'primary' },
-