@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@latest <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=flow

package 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
• v7
• v6
• v5
• v4
• v1
• v0.15

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-content

npx @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-colorError

npx @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 }}
-  renderTags={(value, getTagProps, ownerState) =>
-    value.map((option, index) => (
-      <Chip label={option.label} {...getTagProps({ index })} />
-    ))
-  }
-  componentsProps={{
-    clearIndicator: { width: 10 },
-    paper: { width: 12 },
-    popper: { width: 14 },
-    popupIndicator: { width: 16 },
-  }}
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }}
+  slotProps={{
+    chip: { height: 10 },
+    listbox: {
+        component: CustomListbox,
+        ...{ height: 12 },
+    },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+  renderValue={(value, getItemProps, ownerState) =>
+    value.map((option, index) => (
+      <Chip label={option.label} {...getItemProps({ index })} />
+    ))
+  }
 />

 MuiAutocomplete: {
   defaultProps: {
-    ChipProps: { height: 10 },
-    PaperComponent: CustomPaper,
-    PopperComponent: CustomPopper,
-    ListboxComponent: CustomListbox,
-    ListboxProps: { height: 12 },
-    renderTags: (value, getTagProps, ownerState) =>
-      value.map((option, index) => (
-        <Chip label={option.label} {...getTagProps({ index })} />
-      )),
-    componentsProps: {
-       clearIndicator: { width: 10 },
-       paper: { width: 12 },
-       popper: { width: 14 },
-       popupIndicator: { width: 16 },
-     }
+    slots: {
+      paper: CustomPaper,
+      popper: CustomPopper,
+    },
+    slotProps: {
+      chip: { height: 10 },
+      listbox: {
+        component: CustomListbox,
+        ...{ height: 12 },
+      },
+      clearIndicator: { width: 10 },
+      paper: { width: 12 },
+      popper: { width: 14 },
+      popupIndicator: { width: 16 },
+    },
+    renderValue: (value, getItemProps, ownerState) =>
+      value.map((option, index) => (
+        <Chip label={option.label} {...getItemProps({ index })} />
+      )),
   },
 },

 <Autocomplete
  renderInput={(params) => (
    <TextField
      {...params}
-      InputProps={{
-        ...params.InputProps,
-        endAdornment: (
-          <React.Fragment>
-            {params.InputProps.endAdornment}
-          </React.Fragment>
-        ),
-      }}
+      slotProps={{
+        ...params.slotProps,
+        input: {
+          ...params.slotProps.input,
+          endAdornment: (
+            <React.Fragment>
+              {params.slotProps.input.endAdornment}
+            </React.Fragment>
+          ),
+        },
+      }}
    />
  )}
 />

 const {
-  getTagProps,
-  focusedTag,
+  getItemProps,
+  focusedItem,
 } = useAutocomplete(props);

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-icon

npx @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-grouped

npx @mui/codemod@latest deprecations/button-group-classes <path>

card-header-props

 <CardHeader
-  titleTypographyProps={{ variant: 'h6' }}
-  subheaderTypographyProps={{ variant: 'body2' }}
+  slotProps={{
+    title: { variant: 'h6' },
+    subheader: { variant: 'body2' }
+  }}
 />

 MuiCardHeader: {
   defaultProps: {
-    titleTypographyProps: { variant: 'h6' },
-    subheaderTypographyProps: { variant: 'body2' },
+    slotProps: {
+      title: { variant: 'h6' },
+      subheader: { variant: 'body2' },
+    },
   },
 },

npx @mui/codemod@latest deprecations/card-header-props <path>

checkbox-props

 <Checkbox
-  inputProps={{ 'aria-label': 'Checkbox' }}
-  inputRef={ref}
+  slotProps={{ input: { 'aria-label': 'Checkbox', ref } }}
 />

npx @mui/codemod@latest deprecations/checkbox-props <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-deleteIcon

npx @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-circle

npx @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-paper

npx @mui/codemod@latest deprecations/dialog-classes <path>

dialog-props

JS transforms:

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

npx @mui/codemod@latest deprecations/dialog-props <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-paper

npx @mui/codemod@latest deprecations/drawer-classes <path>

drawer-props

 <Drawer
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ transitionDuration: 300 }}
-  PaperProps={{ elevation: 20 }}
-  SlideProps={{ direction: 'right' }}
+  slots={{ backdrop: CustomBackdrop }}
+  slotProps={{
+    backdrop: { transitionDuration: 300 },
+    paper: { elevation: 20 },
+    transition: { direction: 'right' },
+  }}
 />

The same applies to SwipeableDrawer.

 MuiDrawer: {
   defaultProps: {
-    BackdropComponent: CustomBackdrop,
-    BackdropProps: { transitionDuration: 300 },
-    PaperProps: { elevation: 20 },
-    SlideProps: { direction: 'right' },
+    slots: { backdrop: CustomBackdrop },
+    slotProps: {
+      backdrop: { transitionDuration: 300 },
+      paper: { elevation: 20 },
+      transition: { direction: 'right' },
+    },
   },
 },

npx @mui/codemod@latest deprecations/drawer-props <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-actionIcon

npx @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-input

npx @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-dashed

npx @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>

menu-props

 <Menu
-  TransitionComponent={CustomTransition}
-  MenuListProps={{ disablePadding: true }}
-  TransitionProps={{ timeout: 200 }}
+  slots={{ transition: CustomTransition }}
+  slotProps={{
+    list: { disablePadding: true },
+    transition: { timeout: 200 },
+  }}
 />

 MuiMenu: {
   defaultProps: {
-    TransitionComponent: CustomTransition,
-    MenuListProps: { disablePadding: true },
-    TransitionProps: { timeout: 200 },
+    slots: { transition: CustomTransition },
+    slotProps: {
+      list: { disablePadding: true },
+      transition: { timeout: 200 },
+    },
   },
 },

npx @mui/codemod@latest deprecations/menu-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-secondary

npx @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>

popover-props

 <Popover
-  BackdropComponent={CustomBackdrop}
-  BackdropProps={{ timeout: 200 }}
-  PaperProps={{ elevation: 4 }}
-  TransitionComponent={CustomTransition}
-  TransitionProps={{ timeout: 200 }}
+  slots={{ backdrop: CustomBackdrop, transition: CustomTransition }}
+  slotProps={{
+    backdrop: { timeout: 200 },
+    paper: { elevation: 4 },
+    transition: { timeout: 200 },
+  }}
 />

 MuiPopover: {
   defaultProps: {
-    BackdropComponent: 'div',
-    BackdropProps: { timeout: 200 },
-    PaperProps: { elevation: 8 },
-    TransitionComponent: 'em',
-    TransitionProps: { timeout: 200 },
+    slots: { backdrop: 'div', transition: 'em' },
+    slotProps: {
+      backdrop: { timeout: 200 },
+      paper: { elevation: 8 },
+      transition: { timeout: 200 },
+    },
   },
 },

npx @mui/codemod@latest deprecations/popover-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@latest deprecations/rating-props <path>

radio-props

 <Radio
-  inputProps={{ 'aria-label': 'Radio' }}
-  inputRef={ref}
+  slotProps={{ input: { 'aria-label': 'Radio', ref } }}
 />

npx @mui/codemod@latest deprecations/radio-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-icon

npx @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@latest deprecations/snackbar-props <path>

speed-dial-props

 <SpeedDial
-  TransitionComponent={CustomTransition}
-  TransitionProps={CustomTransitionProps}
+  slots={{ transition: CustomTransition }}
+  slotProps={{ transition: CustomTransitionProps }}
 />

 MuiSpeedDial: {
   defaultProps: {
-    TransitionComponent: CustomTransition,
-    TransitionProps: CustomTransitionProps,
+    slots: { transition: CustomTransition },
+    slotProps: { transition: CustomTransitionProps },
   },
 },

npx @mui/codemod@latest deprecations/speed-dial-props <path>

speed-dial-action-props

 <SpeedDialAction
-  FabProps={FabProps}
-  TooltipClasses={TooltipClasses}
-  tooltipOpen={true}
-  tooltipPlacement="top"
-  tooltipTitle="test"
+  slotProps={{
+    fab: FabProps,
+    tooltip: {
+      classes: TooltipClasses,
+      open: true,
+      placement: 'top',
+      title: 'test',
+    },
+  }}
 />

 MuiSpeedDialAction: {
   defaultProps: {
-    FabProps: { id: 'test' },
-    TooltipClasses: classes,
-    tooltipOpen: true,
-    tooltipPlacement: 'top',
-    tooltipTitle: 'test',
+    slotProps: {
+      fab: { id: 'test' },
+      tooltip: {
+        classes: classes,
+        open: true,
+        placement: 'top',
+        title: 'test',
+      },
+    },
   },
 },

npx @mui/codemod@latest deprecations/speed-dial-action-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-thumb

npx @mui/codemod@latest deprecations/slider-classes <path>

tabs-props

 <Tabs
-  ScrollButtonComponent={CustomScrollButton}
-  TabIndicatorProps={{ className: 'indicator' }}
-  TabScrollButtonProps={{ disableRipple: true }}
+  slots={{ scrollButtons: CustomScrollButton }}
+  slotProps={{
+    indicator: { className: 'indicator' },
+    scrollButtons: { disableRipple: true },
+  }}
 />

 <Tabs
-  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
+  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
 />

 MuiTabs: {
   defaultProps: {
-    ScrollButtonComponent: CustomScrollButton,
-    TabScrollButtonProps: { disableRipple: true },
-    TabIndicatorProps: { className: 'indicator' },
+    slots: {
+      scrollButtons: CustomScrollButton,
+    },
+    slotProps: {
+      scrollButtons: { disableRipple: true },
+      indicator: { className: 'indicator' },
+    },
   },
 },

npx @mui/codemod@latest deprecations/tabs-props <path>

tooltip-props

 <Tooltip
-  components={{ Arrow: CustomArrow, Tooltip: CustomTooltip }}
-  componentsProps={{ arrow: { testid: 'test-id' }, tooltip: { className: 'custom' } }}
-  PopperComponent={CustomPopperComponent}
-  TransitionComponent={CustomTransitionComponent}
-  PopperProps={CustomPopperProps}
-  TransitionProps={CustomTransitionProps}
+  slots={{
+    arrow: CustomArrow,
+    tooltip: CustomTooltip,
+    popper: CustomPopperComponent,
+    transition: CustomTransitionComponent,
+  }}
+  slotProps={{
+    arrow: { testid: 'test-id' },
+    tooltip: { className: 'custom' },
+    popper: CustomPopperProps,
+    transition: CustomTransitionProps,
+  }}
 />

 MuiTooltip: {
   defaultProps: {
-    PopperComponent: CustomPopperComponent,
-    TransitionComponent: CustomTransitionComponent,
-    PopperProps: CustomPopperProps,
-    TransitionProps: CustomTransitionProps,
-    components: { Arrow: CustomArrow, Tooltip: CustomTooltip }
+    slots: {
+      arrow: CustomArrow,
+      tooltip: CustomTooltip,
+      popper: CustomPopperComponent,
+      transition: CustomTransitionComponent,
+    },
-    componentsProps: { arrow: { testid: 'test-id' }, tooltip: { className: 'custom' } }
+    slotProps: {
+      arrow: { testid: 'test-id' },
+      tooltip: { className: 'custom' },
+      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-line

npx @mui/codemod@latest 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={StepIc