跳到内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查
+

从已弃用的 API 迁移

了解如何在最近弃用的 API 成为重大更改之前迁移。

为什么要迁移

随着维护者不断改进 API，功能会随着时间推移而被弃用。迁移到这些改进的 API 可以带来更好的开发者体验，因此及时更新符合您的最佳利益。弃用的 API 通常会在后续的主要版本中成为重大更改，因此您越早迁移，下一次重大更新就会越顺利。

迁移

Material UI 提供了 deprecations/all codemod，以帮助您以最小的努力保持更新。

npx @mui/codemod@latest deprecations/all <path>

此命令运行所有当前的弃用 codemod，自动迁移到更新后的 API。您可以根据需要经常运行此 codemod，以跟上最新的更改。

包范围的已弃用 API

内部元素覆盖

slots 和 slotProps API 正在标准化过程中。类似的 API—components、componentsProps、<SlotName>Component 和 <SlotName>Props—将被弃用并最终移除。这通过一致性、可预测性和减少认知负荷来改善开发者体验。

组合 CSS 类

组合 CSS 类将被弃用并最终移除，以支持原子类替代方案。例如，.MuiAccordionSummary-contentGutters 类已被弃用，取而代之的是 .MuiAccordionSummary-gutters 和 .MuiAccordionSummary-content 类。这通过减少冗余和认知负荷来改善开发者体验。

系统 props

MUI 系统 props（例如 mt={*}、bgcolor={*} 等）已在 Box、Typography、Link、Grid 和 Stack 组件中弃用。使用下面的 codemod 将所有系统 props 移动到 sx prop

npx @mui/codemod@latest v6.0.0/system-props <path/to/folder>

您也可以手动更新您的组件，如下面的代码片段所示

-<Button mr={2}>
+<Button sx={{ mr: 2 }}>

sx prop 支持系统 props 的所有功能：可以访问主题的回调、响应式值、直接访问主题值、简写等。

主题组件 variants

主题中定义的自定义组件 variants 现在与主题样式覆盖合并，这些覆盖定义在组件的 root slot 中。

使用此 codemod 更新您项目的主题文件

npx @mui/codemod@latest v6.0.0/theme-v6 <path/to/theme>

您也可以手动更新您的主题，如下面的代码片段所示

 createTheme({
   components: {
     MuiButton: {
-      variants: [ ... ],
+      styleOverrides: {
+        root: {
+          variants: [ ... ],
+        },
+      },
     },
   },
 });

这减少了 API 表面，并允许您在组件的其他 slot 中定义 variants。

手风琴

使用下面的codemod迁移代码，如下节所述

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

TransitionComponent

Accordion 的 TransitionComponent prop 已被弃用，取而代之的是 slots.transition

 <Accordion
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}
 />

TransitionProps

Accordion 的 TransitionProps prop 已被弃用，取而代之的是 slotProps.transition

 <Accordion
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

AccordionSummary

使用下面的codemod迁移代码，如下节所述

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

.MuiAccordionSummary-contentGutters

AccordionSummary 的 .MuiAccordionSummary-contentGutters 类已被弃用，取而代之的是 .MuiAccordionSummary-gutters 和 .MuiAccordionSummary-content 类。请注意，.MuiAccordionSummary-gutters 类应用于组件的根元素，而 .MuiAccordionSummary-contentGutters 和 .MuiAccordionSummary-content 类应用于内容元素。

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

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

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

Alert

使用下面的alert-props 和 alert-classes codemod 迁移代码，如下节所述

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

components

Alert 的 components prop 已被弃用，取而代之的是 slots

 <Alert
-  components={{ CloseButton: CustomButton }}
+  slots={{ closeButton: CustomButton }}
 />

componentsProps

Alert 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Alert
-  componentsProps={{ closeButton: { id: 'close-id' } }}
+  slotProps={{ closeButton: { id: 'close-id' } }}
 />

组合 CSS 类

构成 severity（或 variant）和 color prop 值的 CSS 类已被移除。

以下是如何迁移

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

 import { alertClasses } from '@mui/material/Alert';

 MuiAlert: {
   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',
       },
     },
   },
 },

Autocomplete

使用下面的codemod迁移代码，如下节所述

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

*Component props

Autocomplete 的所有 slot (*Component) props 都已被弃用，取而代之的是等效的 slots 和 slotProps 条目

 <Autocomplete
-    PaperComponent={CustomPaperComponent}
-    PopperComponent={CustomPopperComponent}
-    ListboxComponent={CustomListboxComponent}
+    slots={{
+        paper: CustomPaperComponent,
+        popper: CustomPopperComponent,
+    }}
+    slotProps={{
+        listbox: {
+            component: CustomListboxComponent,
+        },
+    }}
 />

*Props props

Autocomplete 的所有 slot props (*Props) props 都已被弃用，取而代之的是等效的 slotProps 条目

 <Autocomplete
-    ChipProps={CustomChipProps}
-    ListboxProps={CustomListboxProps}
+    slotProps={{
+        chip: CustomChipProps,
+        listbox: CustomListboxProps,
+    }}
 />

componentsProps

Autocomplete 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Autocomplete
-  componentsProps={{
-    clearIndicator: { width: 10 },
-    paper: { width: 12 },
-    popper: { width: 14 },
-    popupIndicator: { width: 16 },
+  slotProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
   }}
 />

Avatar

使用下面的codemod迁移代码，如下节所述

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

imgProps

Avatar 的 imgProps prop 已被弃用，取而代之的是 slotProps.img

 <Avatar
-  imgProps={{
-    onError: () => {},
-    onLoad: () => {},
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
   }}
 />;

AvatarGroup

使用下面的codemod迁移代码，如下节所述

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

slotProps.additionalAvatar

AvatarGroup 的 slotProps.additionalAvatar 已被弃用，取而代之的是 slotProps.surplus

 <AvatarGroup
   slotProps={{
-    additionalAvatar: { color: 'red' },
+    surplus: { color: 'red' },
   }}
 >

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

componentsProps

AvatarGroup 的 componentsProps 已被弃用，取而代之的是 slotProps

 <AvatarGroup
-  componentsProps={{
-    additionalAvatar: { color: 'red' },
+  slotProps={{
+    surplus: { color: 'red' },
   }}
 >

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

Backdrop

使用下面的codemod迁移代码，如下节所述

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

components

Backdrop 的 components prop 已被弃用，取而代之的是 slots

 <Backdrop
-  components={{ root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

Backdrop 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Backdrop
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

TransitionComponent

Backdrop 的 TransitionComponent prop 已被弃用，取而代之的是 slots.transition

 <Backdrop
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}

Badge

使用下面的codemod迁移代码，如下节所述

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

components

Badge 的 components prop 已被弃用，取而代之的是 slots

 <Badge
-  components={{ root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 >

componentsProps

Badge 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Badge
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 >

Button

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 variant 和 color prop 值的 CSS 类，以及构成 variant 和 size prop 值的 CSS 类，以及 icon size CSS 类已被移除。

以下是如何迁移

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

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

ButtonGroup

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成以下 props 的 CSS 类已被弃用

  • orientation | variant 和 grouped
  • color、variant 和 grouped

以下是如何迁移

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

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

CardHeader

使用下面的codemod迁移代码，如下节所述

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

titleTypographyProps

CardHeader 的 titleTypographyProps props 已被弃用，取而代之的是 slotProps.title

 <CardHeader
-  titleTypographyProps={titleTypographyProps}
+  slotProps={{ title: titleTypographyProps }}
 />

subheaderTypographyProps

CardHeader 的 subheaderTypographyProps props 已被弃用，取而代之的是 slotProps.subheader

 <CardHeader
-  subheaderTypographyProps={subheaderTypographyProps}
+  slotProps={{ subheader: subheaderTypographyProps }}
 />

Chip

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成以下 props 的 CSS 类已被弃用

  • variant | clickable | deletable 和 color
  • avatar 和 color | size
  • icon 和 color | size
  • deleteIcon 和 color | size
  • label 和 size

以下是如何迁移

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

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

CircularProgress

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 circle CSS 类和 variant prop 值的 CSS 类已被移除。

以下是如何迁移

-.MuiCircularProgress-circleDeterminate
-.MuiCircularProgress-circleIndeterminate
+.MuiCircularProgress-determinate > .MuiCircularProgress-circle
+.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle

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

Divider

使用下面的codemod迁移代码，如下节所述

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

light

Divider 的 light prop 已被弃用。使用 sx={{ opacity : "0.6" }}（或任何不透明度）

 <Divider
-  light
+  sx={{ opacity : "0.6" }}
 />

Drawer

使用下面的codemod迁移代码，如下节所述

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

BackdropProps

Drawer 的 BackdropProps prop 已被弃用，取而代之的是 slotProps.backdrop

 <Drawer
-  BackdropProps={backdropProps}
+  slotProps={{ backdrop: backdropProps }}
 />

PaperProps

Drawer 的 PaperProps prop 已被弃用，取而代之的是 slotProps.paper

 <Drawer
-  PaperProps={paperProps}
+  slotProps={{ paper: paperProps }}
 />

SlideProps

Drawer 的 SlideProps prop 已被弃用，取而代之的是 slotProps.transition

 <Drawer
-  SlideProps={slideProps}
+  slotProps={{ transition: slideProps }}
 />

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成以下 props 的 CSS 类已被弃用

  • paper 和 anchor
  • paper、anchor 和 docked

以下是如何迁移

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

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

FilledInput

使用下面的codemod迁移代码，如下节所述

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

components

FilledInput 的 prop components 已被弃用，取而代之的是 slots

 <FilledInput
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

FilledInput 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <FilledInput
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

FormControlLabel

使用下面的codemod迁移代码，如下节所述

npx @mui/codemod@latest deprecations/form-control-label-props <path>

componentsProps

FormControlLabel 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <FormControlLabel
-  componentsProps={{ typography: typographyProps }}
+  slotProps={{ typography: typographyProps }}
 />

Input

使用下面的codemod迁移代码，如下节所述

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

components

Input 的 prop components 已被弃用，取而代之的是 slots

 <Input
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

Input 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <Input
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

InputBase

使用下面的codemod迁移代码，如下节所述

npx @mui/codemod@latest deprecations/input-base-props <path>
npx @mui/codemod@latest deprecations/input-base-classes <path>

组合 CSS 类

将 input 类与其他 props size、type、multiline、adornedStart、adornedEnd 和 hiddenLabel 组合在一起的 CSS 类已被移除。

以下是如何迁移

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

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

components

InputBase 的 prop components 已被弃用，取而代之的是 slots

 <InputBase
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

InputBase 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <Input
-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
 />

ListItem

使用下面的codemod迁移代码，如下节所述

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

components

ListItem 的 components prop 已被弃用，取而代之的是 slots

 <ListItem
-  components={{ Root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

ListItem 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <ListItem
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

ContainerComponent

ListItem 的 ContainerComponent prop 已被弃用，取而代之的是 slots.root 或 component。

 <ListItem
-  ContainerComponent={CustomContainer}
+  slots={{ root: CustomContainer }}
 />

ContainerProps

ListItem 的 ContainerProps prop 已被弃用，取而代之的是 slotProps.root。

 <ListItem
-  ContainerProps={{ id: 'container-id' }}
+  slotProps={{ root: { id: 'container-id' } }}
 />

ListItemSecondaryAction

已弃用的组件

ListItemSecondaryAction 组件已被弃用，取而代之的是 ListItem 组件中的 secondaryAction prop。

 <ListItem
+  secondaryAction={
+    <IconButton aria-label="Leave a comment">
+      <CommentIcon />
+    </IconButton>
+  }
   disablePadding
 >
   <ListItemText primary="John Doe" />
-  <ListItemSecondaryAction>
-    <IconButton aria-label="Leave a comment">
-      <CommentIcon />
-    </IconButton>
-  </ListItemSecondaryAction>
 </ListItem>

ListItemText

使用下面的codemod迁移代码，如下节所述

npx @mui/codemod@latest deprecations/list-item-text-props <path>

primaryTypographyProps

ListItemText 的 primaryTypographyProps props 已被弃用，取而代之的是 slotProps.primary

 <ListItemText
-  primaryTypographyProps={primaryTypographyProps}
+  slotProps={{ primary: primaryTypographyProps }}
 />

secondaryTypographyProps

ListItemText 的 secondaryTypographyProps props 已被弃用，取而代之的是 slotProps.secondary

 <ListItemText
-  secondaryTypographyProps={secondaryTypographyProps}
+  slotProps={{ secondary: secondaryTypographyProps }}
 />

ImageListItemBar

使用下面的codemod迁移代码，如下节所述

npx @mui/codemod@latest deprecations/image-list-item-bar-classes <path>

组合 CSS 类

构成以下 props 的 CSS 类已被弃用

  • position prop 和 titleWrap 类
  • actionPosition prop 和 titleWrap 类
  • actionPosition prop 和 actionIcon 类

以下是如何迁移

-.MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
-.MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon

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

LinearProgress

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 variant 和 color prop 值的 CSS 类已被弃用。

以下是如何迁移

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

 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}`]: {},
     },
   },
 }

使用下面的codemod迁移代码，如下节所述

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

Menu 的 MenuListProps prop 已被弃用，取而代之的是 slotProps.list

 <Menu
-  MenuListProps={menuListProps}
+  slotProps={{ list: menuListProps }}
 >

TransitionProps

Menu 的 TransitionProps prop 已被弃用，取而代之的是 slotProps.transition

 <Menu
-  TransitionProps={transitionProps}
+  slotProps={{ transition: transitionProps }}
 >

MobileStepper

使用下面的codemod迁移代码，如下节所述

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

LinearProgressProps

MobileStepper 的 LinearProgressProps prop 已被弃用，取而代之的是 slotProps.progress

 <MobileStepper
-  LinearProgressProps={{ color: 'primary' }}
+  slotProps={{ progress: { color: 'primary' } }}
 />

使用下面的codemod迁移代码，如下节所述

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

components

Modal 的 components prop 已被弃用，取而代之的是 slots

 <Modal
-  components={{ Root: CustomRoot, Backdrop: CustomBackdrop }}
+  slots={{ root: CustomRoot, backdrop: CustomBackdrop }}
 >

componentsProps

Modal 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Modal
-  componentsProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
+  slotProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
 >

BackdropProps

Modal 的 BackdropProps prop 已被弃用，取而代之的是 slotProps.backdrop

 <Modal
-  BackdropProps={{ timeout: 500 }}
+  slotProps={{ backdrop: { timeout: 500 } }}
 >

BackdropComponent

Modal 的 BackdropComponent prop 已被弃用，取而代之的是 slots.backdrop

 <Modal
-  BackdropComponent={Backdrop}
+  slots={{ backdrop: Backdrop }}
 >

OutlinedInput

使用下面的codemod迁移代码，如下节所述

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

components

OutlinedInput 的 prop components 已被弃用，取而代之的是 slots

 <OutlinedInput
-  components={{ Input: CustomInput, Root: CustomRoot }}
+  slots={{ input: CustomInput, root: CustomRoot }}
 />

componentsProps

OutlinedInput 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <OutlinedInput
-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
 />

PaginationItem

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 variant 和 color prop 值的 CSS 类已被移除。

以下是如何迁移

-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-colorPrimary
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-colorSecondary
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary

 import { paginationItemClasses } from '@mui/material/PaginationItem';

 MuiPaginationItem: {
   styleOverrides: {
     root: {
-      [`&.${paginationItemClasses.textPrimary}`]: {
+      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.outlinedPrimary}`]: {
+      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.textSecondary}`]: {
+      [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
         color: 'red',
       },
-      [`&.${paginationItemClasses.outlinedSecondary}`]: {
+      [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
         color: 'red',
       },
     },
   },
 },

components

PaginationItems 的 components prop 已被弃用，取而代之的是 slots

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

Popover

使用下面的codemod迁移代码，如下节所述

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

BackdropComponent

Popover 的 BackdropComponent prop 已被弃用，取而代之的是 slots.backdrop

 <Popover
-  BackdropComponent={Backdrop}
+  slots={{ backdrop: Backdrop }}
 >

BackdropProps

Popover 的 BackdropProps prop 已被弃用，取而代之的是 slotProps.backdrop

 <Popover
-  BackdropProps={{ timeout: 500 }}
+  slotProps={{ backdrop: { timeout: 500 } }}
 >

PaperProps

Popover 的 PaperProps prop 已被弃用，取而代之的是 slotProps.paper

 <Popover
-  PaperProps={{ id: 'paper-id' }}
+  slotProps={{ paper: { id: 'paper-id' } }}
 >

TransitionComponent

Popover 的 TransitionComponent prop 已被弃用，取而代之的是 slots.transition

 <Popover
-  TransitionComponent={Transition}
+  slots={{ transition: Transition }}
 >

TransitionProps

Popover 的 TransitionProps prop 已被弃用，取而代之的是 slotProps.transition

 <Popover
-  TransitionProps={{ timeout: 500 }}
+  slotProps={{ transition: { timeout: 500 } }}
 >

Popper

使用下面的codemod迁移代码，如下节所述

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

components

Popper 的 prop components 已被弃用，取而代之的是 slots

 <Popper
-  components={{ Root: CustomRoot }}
+  slots={{ root: CustomRoot }}
 />

componentsProps

Popper 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <Popper
-  componentsProps={{ root: { id: 'root-id' } }}
+  slotProps={{ root: { id: 'root-id' } }}
 />

Rating

使用下面的codemod迁移代码，如下节所述

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

IconContainerComponent

Rating 的 IconContainerComponent prop 已被弃用，取而代之的是 slotProps.icon.component

 <Rating
-  IconContainerComponent={CustomIconContainer}
+  slotProps={{ icon: { component: CustomIconContainer }}}
 />

Select

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 icon 类和 variant prop 值的 CSS 类已被移除。

以下是如何迁移

- .MuiSelect-iconFilled
+ .MuiSelect-filled ~ .MuiSelect-icon
- .MuiSelect-iconOutlined
+ .MuiSelect-outlined ~ .MuiSelect-icon
- .MuiSelect-iconStandard
+ .MuiSelect-standard ~ .MuiSelect-icon

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

Slider

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 color prop 值的 CSS 类，以及构成 size prop 值的 CSS 类已被移除。

以下是如何迁移

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

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

components

Slider 的 components prop 已被弃用，取而代之的是 slots

 <Slider
-  components={{ Track: CustomTrack }}
+  slots={{ track: CustomTrack }}
 />

componentsProps

Slider 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <Slider
-  componentsProps={{ track: { id: 'track-id' } }}
+  slotProps={{ track: { id: 'track-id' } }}
 />

SwipeableDrawer

使用下面的codemod迁移代码，如下节所述

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

BackdropProps

SwipeableDrawer 的 BackdropProps prop 已被弃用，取而代之的是 slotProps.backdrop

 <SwipeableDrawer
-  BackdropProps={backdropProps}
+  slotProps={{ backdrop: backdropProps }}
 />

PaperProps

SwipeableDrawer 的 PaperProps prop 已被弃用，取而代之的是 slotProps.paper

 <SwipeableDrawer
-  PaperProps={paperProps}
+  slotProps={{ paper: paperProps }}
 />

SlideProps

SwipeableDrawer 的 SlideProps prop 已被弃用，取而代之的是 slotProps.transition

 <SwipeableDrawer
-  SlideProps={slideProps}
+  slotProps={{ transition: slideProps }}
 />

ToggleButtonGroup

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 orientation prop 值和 grouped CSS 类的 CSS 类已被移除。

以下是如何迁移

-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped

 import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';

 MuiButtonGroup: {
   styleOverrides: {
     root: {
-      [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
+      [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
        },
-      [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
+      [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
       },
     },
   },
 },

Tabs

使用下面的codemod迁移代码，如下节所述

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

flexContainer 和 flexContainerVertical 类

类 flexContainer 已被弃用，取而代之的是 list。构成 vertical prop 值和 flexContainer CSS 类的 CSS 类已被移除。

以下是如何迁移

-.MuiTabs-flexContainer
+.MuiTabs-list
-.MuiTabs-flexContainerVertical
+.MuiTabs-list.MuiTabs-vertical

 import { tabsClasses } from '@mui/material/Tabs';

 MuiButtonGroup: {
   styleOverrides: {
     root: {
-      [`& .${tabsClasses.flexContainer}`]: {
+      [`& .${tabsClasses.list}`]: {
          color: 'red',
        },
-      [`& .${tabsClasses.flexContainerVertical}`]: {
+      [`& .${tabsClasses.list}.${tabsClasses.vertical}`]: {
          color: 'red',
       },
     },
   },
 },

ScrollButtonComponent

Tabs 的 ScrollButtonComponent prop 已被弃用，取而代之的是 slots.scrollButton

 <Tabs
-  ScrollButtonComponent={ScrollButtonComponent}
+  slots={{ scrollButton: ScrollButtonComponent }}
 />

TabScrollButtonProps

Tabs 的 TabScrollButtonProps prop 已被弃用，取而代之的是 slotProps.scrollButton

 <Tabs
-  TabScrollButtonProps={TabScrollButtonProps}
+  slotProps={{ scrollButton: TabScrollButtonProps }}
 />

TabIndicatorProps

Tabs 的 TabIndicatorProps prop 已被弃用，取而代之的是 slotProps.indicator

 <Tabs
-  TabIndicatorProps={TabIndicatorProps}
+  slotProps={{ indicator: TabIndicatorProps }}
 />

slots.StartScrollButtonIcon

Tabs 的 slots.StartScrollButtonIcon prop 已被弃用，取而代之的是 slots.startScrollButtonIcon (camelCase)

 <Tabs
-  slots={{ StartScrollButtonIcon: StartScrollButtonIcon }}
+  slots={{ startScrollButtonIcon: StartScrollButtonIcon }}
 />

slots.EndScrollButtonIcon

Tabs 的 slots.EndScrollButtonIcon prop 已被弃用，取而代之的是 slots.endScrollButtonIcon (camelCase)

 <Tabs
-  slots={{ EndScrollButtonIcon: EndScrollButtonIcon }}
+  slots={{ endScrollButtonIcon: EndScrollButtonIcon }}
 />

Tab

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

iconWrapper 类已被移除。

以下是如何迁移

- .MuiTab-iconWrapper
+ .MuiTab-icon

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

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

TableSortLabel

使用下面的codemod迁移代码，如下节所述

npx @mui/codemod@latest deprecations/table-sort-label-classes <path>

组合 CSS 类

构成 direction prop 和 icon prop 的 CSS 类已被移除。

以下是如何迁移

-.MuiTableSortLabel-iconDirectionDesc
+.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon
-.MuiTableSortLabel-iconDirectionAsc
+.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon

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

TextField

使用下面的codemod迁移代码，如下节所述

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

*Props props

TextField 的所有 slot props (*Props) props 都已被弃用，取而代之的是等效的 slotProps 条目

 <TextField
-  InputProps={CustomInputProps}
-  inputProps={CustomHtmlInputProps}
-  SelectProps={CustomSelectProps}
-  InputLabelProps={CustomInputLabelProps}
-  FormHelperTextProps={CustomFormHelperTextProps}
+  slotProps={{
+    input: CustomInputProps
+    htmlInput: CustomHtmlInputProps
+    select: CustomSelectProps
+    inputLabel: CustomInputLabelProps
+    formHelperText: CustomFormHelperTextProps
+  }}
 />

Tooltip

使用下面的codemod迁移代码，如下节所述

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

components

Tooltip 的 prop components 已被弃用，取而代之的是 slots

 <Tooltip
-  components={{ Arrow: CustomArrow }}
+  slots={{ arrow: CustomArrow }}
 />

componentsProps

Tooltip 的 prop componentsProps 已被弃用，取而代之的是 slotProps

 <Tooltip
-  componentsProps={{ arrow: { id: 'arrow-id' } }}
+  slotProps={{ arrow: { id: 'arrow-id' } }}
 />

*Component props

Tooltip 的所有 slot (*Component) props 都已被弃用，取而代之的是等效的 slots 条目

 <Tooltip
-  PopperComponent={CustomPopperComponent}
-  TransitionComponent={CustomTransitionComponent}
+  slots={{
+    popper: CustomPopperComponent,
+    transition: CustomTransitionComponent,
+  }}
 />

*Props props

Tooltip 的所有 slot props (*Props) props 都已被弃用，取而代之的是等效的 slotProps 条目

 <Tooltip
-  PopperProps={CustomPopperProps}
-  TransitionProps={CustomTransitionProps}
+  slotProps={{
+    popper: CustomPopperProps,
+    transition: CustomTransitionProps,
+  }}
 />

Typography

使用下面的codemod迁移代码，如下节所述

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

paragraph

Typography 的 paragraph prop 已被弃用。如果您想在使用 Typography 时渲染 p，请传递 component="p"。

 <Typography
   variant="subtitle1"
-  paragraph
+  component="p"
 />

请注意，Typography 默认已渲染 p，因此在不显式传递 variant 时，无需传递 component="p"。这是因为 body1 是 Typography 中的默认 variant，而 body1 和 body2 variants 渲染 p，因此在使用这些 variants 之一时，无需传递 component="p"。

使用 paragraph 时自动添加到元素的 16px margin-bottom 现在必须手动处理。移除 paragraph prop 的 codemod 会向 Typography 组件添加 sx={{ marginBottom: '16px' }}。

StepLabel

使用下面的codemod迁移代码，如下节所述

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

componentsProps

StepLabel 的 componentsProps prop 已被弃用，取而代之的是 slotProps

 <StepLabel
-  componentsProps={{ label: labelProps }}
+  slotProps={{ label: labelProps }}
 />

StepIconComponent

StepLabel 的 StepIconComponent prop 已被弃用，取而代之的是 slots.stepIcon

 <StepLabel
-  StepIconComponent={StepIconComponent}
+  slots={{ stepIcon: StepIconComponent }}
 />

StepIconProps

StepLabel 的 StepIconProps prop 已被弃用，取而代之的是 slotProps.stepIcon

 <StepLabel
-  StepIconProps={StepIconProps}
+  slotProps={{ stepIcon: StepIconProps }}
 />

StepConnector

使用下面的codemod迁移代码，如下节所述

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

组合 CSS 类

构成 line CSS 类和 orientation prop 值的 CSS 类已被移除。

以下是如何迁移

-.MuiStepConnector-lineHorizontal
+.MuiStepConnector-horizontal > .MuiStepConnector-line
-.MuiStepConnector-lineVertical
+.MuiStepConnector-vertical > .MuiStepConnector-line

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

StepContent

使用下面的codemod迁移代码，如下节所述

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

TransitionComponent

StepContent 的 TransitionComponent prop 已被弃用，取而代之的是 slots.transition

 <StepContent
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}
 />

TransitionProps

StepContent 的 TransitionProps prop 已被弃用，取而代之的是 slotProps.transition

 <StepContent
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

SpeedDial

使用下面的codemod迁移代码，如下节所述

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

TransitionComponent

SpeedDial 的 TransitionComponent prop 已被弃用，取而代之的是 slots.transition

 <SpeedDial
-  TransitionComponent={CustomTransition}
+  slots={{ transition: CustomTransition }}

TransitionProps

SpeedDial 的 TransitionProps prop 已被弃用，取而代之的是 slotProps.transition

 <SpeedDial
-  TransitionProps={{ unmountOnExit: true }}
+  slotProps={{ transition: { unmountOnExit: true } }}
 />

SpeedDialAction

使用下面的codemod迁移代码，如下节所述

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

FabProps

SpeedDialAction 的 FabProps prop 已被弃用，取而代之的是 slotProps.fab

 <SpeedDialAction
-  FabProps={CustomFabProps}
+  slotProps={{ fab: CustomFabProps }}

TooltipClasses

SpeedDialAction 的 TooltipClasses prop 已被弃用，取而代之的是 slotProps.tooltip.classes

 <SpeedDialAction
-  TooltipClasses={{ tooltip: 'foo' }}
+  slotProps={{ tooltip: { classes: { tooltip: 'foo' } } }}
 />

tooltipPlacement

SpeedDialAction 的 tooltipPlacement prop 已被弃用，取而代之的是 slotProps.tooltip.placement

 <SpeedDialAction
-  tooltipPlacement="top"
+  slotProps={{ tooltip: { placement: 'top' } }}
 />

tooltipTitle

SpeedDialAction 的 tooltipTitle prop 已被弃用，取而代之的是 slotProps.tooltip.title

 <SpeedDialAction
-  tooltipTitle="foo"
+  slotProps={{ tooltip: { title: 'foo' } }}
 />

tooltipOpen

SpeedDialAction 的 tooltipOpen prop 已被弃用，取而代之的是 slotProps.tooltip.open

 <SpeedDialAction
-  tooltipOpen
+  slotProps={{ tooltip: { open: true } }}
 />