遷移自已棄用的 API

了解如何在最近棄用的 API 變成破壞性變更之前遷移。

為何您應該遷移

隨著維護者對 API 進行改進，功能會隨著時間推移而被棄用。遷移到這些改進的 API 可以帶來更好的開發者體驗，因此保持最新狀態符合您的最佳利益。棄用的 API 通常會在後續的主要版本中變成破壞性變更，因此您越早遷移，下一次主要更新就會越順利。

遷移

Material UI 提供了 deprecations/all codemod，以協助您以最少的努力保持最新狀態。

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

此命令會執行目前所有的棄用 codemod，自動遷移到更新的 API。您可以根據需要經常執行此 codemod，以跟上最新的變更。

Accordion

使用下方的 codemod 遷移程式碼，如以下章節所述

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

TransitionComponent

Accordion 的 TransitionComponent 屬性已被棄用，以支持 slots.transition

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

TransitionProps

Accordion 的 TransitionProps 屬性已被棄用，以支持 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 類別會應用於元件的 root，而 .MuiAccordionSummary-contentGutters 和 .MuiAccordionSummary-content 類別會應用於 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 屬性已被棄用，以支持 slots

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

componentsProps

Alert 的 componentsProps 屬性已被棄用，以支持 slotProps

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

組合的 CSS 類別

組成 severity (或 variant) 和 color 屬性值的 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) 屬性都已被棄用，以支持等效的 slots 和 slotProps 項目

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

*Props props

所有 Autocomplete 的 slot 屬性 (*Props) 屬性都已被棄用，以支持等效的 slotProps 項目

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

componentsProps

Autocomplete 的 componentsProps 屬性已被棄用，以支持 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 屬性已被棄用，以支持 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 屬性已被棄用，以支持 slots

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

componentsProps

Backdrop 的 componentsProps 屬性已被棄用，以支持 slotProps

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

TransitionComponent

Backdrop 的 TransitionComponent 屬性已被棄用，以支持 slots.transition

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

Badge

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

Badge 的 components 屬性已被棄用，以支持 slots

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

componentsProps

Badge 的 componentsProps 屬性已被棄用，以支持 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 屬性值，以及組成 variant 和 size 屬性值的 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 類別

組成以下屬性的 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 屬性已被棄用，以支持 slotProps.title

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

subheaderTypographyProps

CardHeader 的 subheaderTypographyProps 屬性已被棄用，以支持 slotProps.subheader

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

Chip

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成以下屬性的 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 屬性值的 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 屬性已被棄用。請使用 sx={{ opacity : "0.6" }} (或任何不透明度)

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

Drawer

使用下方的 codemod 遷移程式碼，如以下章節所述

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

BackdropProps

Drawer 的 BackdropProps 屬性已被棄用，以支持 slotProps.backdrop

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

PaperProps

Drawer 的 PaperProps 屬性已被棄用，以支持 slotProps.paper

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

SlideProps

Drawer 的 SlideProps 屬性已被棄用，以支持 slotProps.transition

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

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成以下屬性的 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 的 components 屬性已被棄用，以支持 slots

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

componentsProps

FilledInput 的 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 屬性已被棄用，以支持 slotProps

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

Input

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

Input 的 components 屬性已被棄用，以支持 slots

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

componentsProps

Input 的 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 類別與其他屬性 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 的 components 屬性已被棄用，以支持 slots

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

componentsProps

InputBase 的 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 屬性已被棄用，以支持 slots

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

componentsProps

ListItem 的 componentsProps 屬性已被棄用，以支持 slotProps

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

ContainerComponent

ListItem 的 ContainerComponent 屬性已被棄用，以支持 slots.root 或改用 component。

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

ContainerProps

ListItem 的 ContainerProps 屬性已被棄用，以支持 slotProps.root。

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

ListItemSecondaryAction

已棄用的元件

ListItemSecondaryAction 元件已被棄用，以支持 ListItem 元件中的 secondaryAction 屬性。

 <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 屬性已被棄用，以支持 slotProps.primary

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

secondaryTypographyProps

ListItemText 的 secondaryTypographyProps 屬性已被棄用，以支持 slotProps.secondary

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

ImageListItemBar

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成以下屬性的 CSS 類別已被棄用

position 屬性和 titleWrap 類別
actionPosition 屬性和 titleWrap 類別
actionPosition 屬性和 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 屬性值的 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>

MenuListProps

Menu 的 MenuListProps 屬性已被棄用，以支持 slotProps.list

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

TransitionProps

Menu 的 TransitionProps 屬性已被棄用，以支持 slotProps.transition

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

MobileStepper

使用下方的 codemod 遷移程式碼，如以下章節所述

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

LinearProgressProps

MobileStepper 的 LinearProgressProps 屬性已被棄用，以支持 slotProps.progress

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

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

Modal 的 components 屬性已被棄用，以支持 slots

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

componentsProps

Modal 的 componentsProps 屬性已被棄用，以支持 slotProps

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

BackdropProps

Modal 的 BackdropProps 屬性已被棄用，以支持 slotProps.backdrop

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

BackdropComponent

Modal 的 BackdropComponent 屬性已被棄用，以支持 slots.backdrop

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

OutlinedInput

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

OutlinedInput 的 components 屬性已被棄用，以支持 slots

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

componentsProps

OutlinedInput 的 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 屬性值的 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 屬性已被棄用，以支持 slots

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

使用下方的 codemod 遷移程式碼，如以下章節所述

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

BackdropComponent

Popover 的 BackdropComponent 屬性已被棄用，以支持 slots.backdrop

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

BackdropProps

Popover 的 BackdropProps 屬性已被棄用，以支持 slotProps.backdrop

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

PaperProps

Popover 的 PaperProps 屬性已被棄用，以支持 slotProps.paper

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

TransitionComponent

Popover 的 TransitionComponent 屬性已被棄用，以支持 slots.transition

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

TransitionProps

Popover 的 TransitionProps 屬性已被棄用，以支持 slotProps.transition

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

Popper

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

Popper 的 components 屬性已被棄用，以支持 slots

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

componentsProps

Popper 的 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 屬性已被棄用，以支持 slotProps.icon.component

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

Select

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成 icon 類別和 variant 屬性的 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 屬性值，以及組成 size 屬性值的 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 屬性已被棄用，以支持 slots

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

componentsProps

Slider 的 componentsProps 屬性已被棄用，以支持 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 屬性已被棄用，以支持 slotProps.backdrop

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

PaperProps

SwipeableDrawer 的 PaperProps 屬性已被棄用，以支持 slotProps.paper

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

SlideProps

SwipeableDrawer 的 SlideProps 屬性已被棄用，以支持 slotProps.transition

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

ToggleButtonGroup

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成 orientation 屬性值和 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 屬性值和 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 屬性已被棄用，以支持 slots.scrollButton

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

TabScrollButtonProps

Tabs 的 TabScrollButtonProps 屬性已被棄用，以支持 slotProps.scrollButton

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

TabIndicatorProps

Tabs 的 TabIndicatorProps 屬性已被棄用，以支持 slotProps.indicator

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

slots.StartScrollButtonIcon

Tabs 的 slots.StartScrollButtonIcon 屬性已被棄用，以支持 slots.startScrollButtonIcon (camelCase)

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

slots.EndScrollButtonIcon

Tabs 的 slots.EndScrollButtonIcon 屬性已被棄用，以支持 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 屬性和 icon 屬性的 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) 屬性都已被棄用，以支持等效的 slotProps 項目

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

使用下方的 codemod 遷移程式碼，如以下章節所述

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

components

Tooltip 的 components 屬性已被棄用，以支持 slots

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

componentsProps

Tooltip 的 componentsProps 屬性已被棄用，以支持 slotProps

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

*Component props

所有 Tooltip 的 slot (*Component) 屬性都已被棄用，以支持等效的 slots 項目

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

*Props props

所有 Tooltip 的 slot 屬性 (*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 屬性已被棄用。如果您想在使用 Typography 時呈現 p，請傳遞 component="p"。

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

請注意，Typography 預設已呈現 p，因此在未明確傳遞 variant 時，無需傳遞 component="p"。這是因為 body1 是 Typography 中的預設 variant，而 body1 和 body2 variant 會呈現 p，因此在使用其中一個 variant 時，無需傳遞 component="p"。

使用 paragraph 時自動新增至元素的 16px margin-bottom 現在必須手動處理。移除 paragraph 屬性的 codemod 會將 sx={{ marginBottom: '16px' }} 新增至 Typography 元件。

StepLabel

使用下方的 codemod 遷移程式碼，如以下章節所述

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

componentsProps

StepLabel 的 componentsProps 屬性已被棄用，以支持 slotProps

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

StepIconComponent

StepLabel 的 StepIconComponent 屬性已被棄用，以支持 slots.stepIcon

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

StepIconProps

StepLabel 的 StepIconProps 屬性已被棄用，以支持 slotProps.stepIcon

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

StepConnector

使用下方的 codemod 遷移程式碼，如以下章節所述

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

組合的 CSS 類別

組成 line CSS 類別和 orientation 屬性值的 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 屬性已被棄用，以支持 slots.transition

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

TransitionProps

StepContent 的 TransitionProps 屬性已被棄用，以支持 slotProps.transition

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

SpeedDial

使用下方的 codemod 遷移程式碼，如以下章節所述

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

TransitionComponent

SpeedDial 的 TransitionComponent 屬性已被棄用，以支持 slots.transition

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

TransitionProps

SpeedDial 的 TransitionProps 屬性已被棄用，以支持 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 屬性已被棄用，以支持 slotProps.fab

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

TooltipClasses

SpeedDialAction 的 TooltipClasses 屬性已被棄用，以支持 slotProps.tooltip.classes

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

tooltipPlacement

SpeedDialAction 的 tooltipPlacement 屬性已被棄用，以支持 slotProps.tooltip.placement

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

tooltipTitle

SpeedDialAction 的 tooltipTitle 屬性已被棄用，以支持 slotProps.tooltip.title

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

tooltipOpen

SpeedDialAction 的 tooltipOpen 屬性已被棄用，以支持 slotProps.tooltip.open

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