Deprecated API에서 마이그레이션하기

Deprecated API에서 마이그레이션하기 (Migrating from deprecated APIs)

최근에 deprecated(더 이상 권장되지 않는)된 API가 breaking change가 되기 전에 어떻게 마이그레이션하는지 알아볼게요.

출처: 문서

본문

왜 마이그레이션해야 하나요 (Why you should migrate)

유지보수자들이 API를 개선하면서 피처(feature)들은 시간이 지남에 따라 deprecated됩니다. 이런 개선된 API로 마이그레이션하면 더 나은 개발자 경험을 얻을 수 있으니, 최신 상태를 유지하는 것이 여러분에게 유리해요. Deprecated된 API는 종종 이후 메이저 버전에서 breaking change가 되기 때문에, 빨리 마이그레이션할수록 다음 메이저 업데이트가 더 매끄러워져요.

마이그레이션하기 (Migrating)

Material UI는 최소한의 노력으로 최신 상태를 유지할 수 있게 deprecations/all codemod를 제공해요.

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

이 명령은 현재의 모든 deprecations codemod를 실행해, 업데이트된 API로 자동 마이그레이션해 줘요. 이 codemod는 최신 변경 사항을 따라잡기 위해 필요에 따라 얼마든지 실행할 수 있어요.

:::info

Deprecated된 API에서 수동으로 마이그레이션해야 한다면, Material UI v5에서 추가된 모든 deprecation에 대한 예시를 아래에서 찾을 수 있어요. 특정 codemod를 실행해야 한다면 그 codemod들도 아래에 링크되어 있어요.

:::

패키지 전반의 deprecated API (Package-wide deprecated APIs)

내부 요소 오버라이드 (Inner element overrides)

slots와 slotProps API가 표준화되는 과정에 있어요. 이와 유사한 API들 — components, componentsProps, <SlotName>Component, <SlotName>Props — 은 deprecated되고 결국 제거될 예정이에요. 이는 일관성, 예측 가능성, 인지 부하(cognitive load) 감소를 통해 개발자 경험을 개선해요.

복합 CSS 클래스 (Composed CSS classes)

복합(composed) CSS 클래스는 원자(atomic) 클래스 대안을 위해 deprecated되고 결국 제거될 예정이에요. 예를 들어 .MuiAccordionSummary-contentGutters 클래스는 .MuiAccordionSummary-gutters와 .MuiAccordionSummary-content 클래스를 위해 deprecated됐어요. 이는 부풀림(bloat)과 인지 부하를 줄여 개발자 경험을 개선해요.

시스템 props (System props)

MUI System props(mt={*}, bgcolor={*} 등)가 Box, Typography, Link, Grid, Stack 컴포넌트에서 deprecated됐어요. 모든 System prop을 sx prop으로 옮기려면 아래 codemod를 사용하세요:

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

아래 스니펫처럼 컴포넌트를 수동으로 업데이트할 수도 있어요:

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

sx prop은 시스템 props의 모든 기능을 지원해요: 테마에 접근하는 콜백, 반응형 값, 테마 값에 대한 직접 접근, 약어(shorthand) 등.

테마 컴포넌트 variants (Theme component 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를 정의할 수 있게 해 줘요.

Accordion

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

TransitionComponent

Accordion의 TransitionComponent prop은 slots.transition을 위해 deprecated됐어요:

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

TransitionProps

Accordion의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

 <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 클래스를 위해 deprecated됐어요. .MuiAccordionSummary-gutters 클래스는 컴포넌트의 루트에, 반면 .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 prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Alert의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

복합 CSS 클래스 (Composed CSS classes)

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 항목을 위해 deprecated됐어요:

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

:::warning ListboxComponent가 다른 *Component props와 다르게 구현돼 component와 as props와 유사하게 동작하기 때문에, listbox slot은 특별한 경우예요. slots.listbox 항목이 존재하며 컴포넌트 전체를 대체하는 데 사용할 수 있지만, 원래 listbox 스타일을 유지하는 ListboxComponent의 동작을 유지하고 싶다면 slotProps.listbox.component 항목을 사용해야 해요. :::

*Props props

Autocomplete의 모든 slot props(*Props) props는 동일한 slotProps 항목을 위해 deprecated됐어요:

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

componentsProps

Autocomplete의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

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

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

componentsProps

AvatarGroup의 componentsProps는 slotProps를 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

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

componentsProps

Backdrop의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

TransitionComponent

Backdrop의 TransitionComponent prop은 slots.transition을 위해 deprecated됐어요:

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

Badge

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

components

Badge의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Badge의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

Button

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

variant와 color prop 값을 구성하는 CSS 클래스, variant와 size prop 값을 구성하는 CSS 클래스, 그리고 icon 크기 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 클래스 (Composed CSS classes)

다음 props를 구성하는 CSS 클래스들이 deprecated됐어요:

• 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을 위해 deprecated됐어요:

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

subheaderTypographyProps

CardHeader의 subheaderTypographyProps props는 slotProps.subheader를 위해 deprecated됐어요:

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

Chip

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

다음 props를 구성하던 CSS 클래스들이 deprecated됐어요:

• 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 클래스 (Composed CSS classes)

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은 deprecated됐어요. sx={{ opacity : "0.6" }}(또는 어떤 opacity든)를 사용하세요:

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

Dialog

아래 dialog-classes-codemod와 dialog-props-codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

scroll prop 값을 구성하는 CSS 클래스가 제거됐어요.

마이그레이션 방법은 다음과 같아요:

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

 import { dialogClasses } from '@mui/material/Dialog';

 MuiDialog: {
   styleOverrides: {
     root: {
-      [`& .${dialogClasses.paperScrollBody}`]: {
+      [`& .${dialogClasses.scrollBody} > .${dialogClasses.paper}`]: {
         color: 'red',
       },
-      [`& .${dialogClasses.paperScrollPaper}`]: {
+      [`& .${dialogClasses.scrollPaper} > .${dialogClasses.paper}`]: {
         color: 'red',
       },
     },
   },
 },

TransitionComponent

Dialog의 TransitionComponent prop은 slots.transition을 위해 deprecated됐어요:

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

TransitionProps

Dialog의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

PaperProps

Dialog의 PaperProps prop은 slotProps.paper를 위해 deprecated됐어요:

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

Drawer

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

BackdropProps

Drawer의 BackdropProps prop은 slotProps.backdrop을 위해 deprecated됐어요:

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

PaperProps

Drawer의 PaperProps prop은 slotProps.paper를 위해 deprecated됐어요:

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

SlideProps

Drawer의 SlideProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

다음 props를 구성하던 CSS 클래스들이 deprecated됐어요:

• 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 prop은 slots를 위해 deprecated됐어요:

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

componentsProps

FilledInput의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

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

Input

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

components

Input의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Input의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

InputBase

아래 input-base-props-codemod와 input-base-classes-codemod codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

InputBase의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

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

componentsProps

ListItem의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

ContainerComponent

ListItem의 ContainerComponent prop은 대신 slots.root 또는 component을 위해 deprecated됐어요.

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

ContainerProps

ListItem의 ContainerProps prop은 대신 slotProps.root를 위해 deprecated됐어요.

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

ListItemSecondaryAction

Deprecated된 컴포넌트 (Deprecated component)

ListItemSecondaryAction 컴포넌트는 ListItem 컴포넌트의 secondaryAction prop을 위해 deprecated됐어요.

 <ListItem
+  secondaryAction={
+    <IconButton aria-label="Leave a comment">
+      <CommentIcon />
+    </IconButton>
+  }
   disablePadding
 >
   <ListItemButton>
     <ListItemText primary="John Doe" />
   </ListItemButton>
-  <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를 위해 deprecated됐어요:

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

secondaryTypographyProps

ListItemText의 secondaryTypographyProps props는 slotProps.secondary를 위해 deprecated됐어요:

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

ImageListItemBar

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

다음 props를 구성하던 CSS 클래스들이 deprecated됐어요:

• 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 클래스 (Composed CSS classes)

variant와 color prop 값을 구성하는 CSS 클래스들이 deprecated됐어요.

마이그레이션 방법은 다음과 같아요:

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

Menu

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

MenuListProps

Menu의 MenuListProps prop은 slotProps.list를 위해 deprecated됐어요:

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

TransitionProps

Menu의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

MobileStepper

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

LinearProgressProps

MobileStepper의 LinearProgressProps prop은 slotProps.progress를 위해 deprecated됐어요:

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

Modal

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

components

Modal의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Modal의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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을 위해 deprecated됐어요:

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

BackdropComponent

Modal의 BackdropComponent prop은 slots.backdrop을 위해 deprecated됐어요:

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

OutlinedInput

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

components

OutlinedInput의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

OutlinedInput의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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 클래스 (Composed CSS classes)

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를 위해 deprecated됐어요:

 <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을 위해 deprecated됐어요:

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

BackdropProps

Popover의 BackdropProps prop은 slotProps.backdrop을 위해 deprecated됐어요:

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

PaperProps

Popover의 PaperProps prop은 slotProps.paper를 위해 deprecated됐어요:

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

TransitionComponent

Popover의 TransitionComponent prop은 slots.transition을 위해 deprecated됐어요:

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

TransitionProps

Popover의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

Popper

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

components

Popper의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Popper의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

Rating

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

IconContainerComponent

Rating의 IconContainerComponent prop은 slotProps.icon.component를 위해 deprecated됐어요:

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

Select

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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

아래 slider-props-codemod와 slider-classes-codemod codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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를 위해 deprecated됐어요:

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

componentsProps

Slider의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

 <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을 위해 deprecated됐어요:

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

PaperProps

SwipeableDrawer의 PaperProps prop은 slotProps.paper를 위해 deprecated됐어요:

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

SlideProps

SwipeableDrawer의 SlideProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

ToggleButtonGroup

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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

아래 tab-props-codemod, tab-classes-codemod codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

flexContainer와 flexContainerVertical 클래스

flexContainer 클래스는 list를 위해 deprecated됐어요. 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.scrollButtons를 위해 deprecated됐어요:

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

TabScrollButtonProps

Tabs의 TabScrollButtonProps prop은 slotProps.scrollButtons를 위해 deprecated됐어요:

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

TabIndicatorProps

Tabs의 TabIndicatorProps prop은 slotProps.indicator를 위해 deprecated됐어요:

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

slots.StartScrollButtonIcon

Tabs의 slots.StartScrollButtonIcon prop은 slots.startScrollButtonIcon(camelCase)을 위해 deprecated됐어요:

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

slots.EndScrollButtonIcon

Tabs의 slots.EndScrollButtonIcon prop은 slots.endScrollButtonIcon(camelCase)을 위해 deprecated됐어요:

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

Tab

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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 클래스 (Composed CSS classes)

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 항목을 위해 deprecated됐어요:

 <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의 components prop은 slots를 위해 deprecated됐어요:

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

componentsProps

Tooltip의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

*Component props

Tooltip의 모든 slot(*Component) props는 동일한 slots 항목을 위해 deprecated됐어요:

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

*Props props

Tooltip의 모든 slot props(*Props) props는 동일한 slotProps 항목을 위해 deprecated됐어요:

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

Typography

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

paragraph

Typography의 paragraph prop은 deprecated됐어요. 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 prop을 제거하는 codemod는 Typography 컴포넌트에 sx={{ marginBottom: '16px' }}를 추가해요.

StepLabel

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

componentsProps

StepLabel의 componentsProps prop은 slotProps를 위해 deprecated됐어요:

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

StepIconComponent

StepLabel의 StepIconComponent prop은 slots.stepIcon을 위해 deprecated됐어요:

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

StepIconProps

StepLabel의 StepIconProps prop은 slotProps.stepIcon을 위해 deprecated됐어요:

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

StepConnector

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

복합 CSS 클래스 (Composed CSS classes)

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을 위해 deprecated됐어요:

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

TransitionProps

StepContent의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

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

SpeedDial

아래 codemod를 사용해 다음 섹션에서 설명하는 대로 코드를 마이그레이션하세요:

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

TransitionComponent

SpeedDial의 TransitionComponent prop은 slots.transition을 위해 deprecated됐어요:

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

TransitionProps

SpeedDial의 TransitionProps prop은 slotProps.transition을 위해 deprecated됐어요:

 <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를 위해 deprecated됐어요:

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

TooltipClasses

SpeedDialAction의 TooltipClasses prop은 slotProps.tooltip.classes를 위해 deprecated됐어요:

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

tooltipPlacement

SpeedDialAction의 tooltipPlacement prop은 slotProps.tooltip.placement을 위해 deprecated됐어요:

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

tooltipTitle

SpeedDialAction의 tooltipTitle prop은 slotProps.tooltip.title을 위해 deprecated됐어요:

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

tooltipOpen

SpeedDialAction의 tooltipOpen prop은 slotProps.tooltip.open을 위해 deprecated됐어요:

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

더 알아보기 (Learn more)

• mui-codemod — deprecations — 모든 deprecation codemod 목록
• v6 migration guide — 다음 메이저 버전으로의 마이그레이션 가이드
• slots와 slotProps 소개 — 컴포넌트 커스터마이즈에 대한 이해