Zenn
Open1

Material UI v6 to v7 移行メモ

Material-UI
mui
YOS0602YOS0602

参考ページ↓

https://mui.com/material-ui/migration/upgrade-to-v7

v7にアップグレードする動機

関連ライブラリのバージョン

下記のライブラリを使用している場合は、同時にv7に上げる。

  • @mui/icons-material
  • @mui/system
  • @mui/lab
  • @mui/material-nextjs
  • @mui/styled-engine
  • @mui/styled-engine-sc
  • @mui/utils

MUI XパッケージはMUIのバージョン戦略に追随していないため、MUIv7対応中は上げない方が良い。

  • @mui/x-data-grid
  • @mui/x-data-grid-pro
  • @mui/x-data-grid-premium
  • @mui/x-date-pickers
  • @mui/x-date-pickers-pro
  • @mui/x-charts
  • @mui/x-tree-view
  • @mui/x-tree-view-pro

TypeScriptのminimumサポートバージョン

4.9

reactの型定義

@types/react* パッケージのバージョンが、react本体のメジャーバージョンと一致するようにしておく。

破壊的変更

パッケージレイアウトの変更

Deep importsが無効となった。

-import createTheme from '@mui/material/styles/createTheme';
+import { createTheme } from '@mui/material/styles';

バンドルサイズ削減のためのModern bundles設定が重要ではなくなったため取り除かれた。バンドラ向けにエイリアスを設定していた場合は削除する。

 {
   resolve: {
     alias: {
-      '@mui/material': '@mui/material/modern',
-      '@mui/styled-engine': '@mui/styled-engine/modern',
-      '@mui/system': '@mui/system/modern',
-      '@mui/base': '@mui/base/modern',
-      '@mui/utils': '@mui/utils/modern',
-      '@mui/lab': '@mui/lab/modern',
     }
   }
 }

iconパッケージをESMインポートするようViteエイリアスを設定していた場合、不要になる。

 // vite.config.js
   resolve: {
     alias: [
-      {
-        find: /^@mui\/icons-material\/(.*)/,
-        replacement: "@mui/icons-material/esm/$1",
-      },
     ],
   },

よくわからんけどこれも変更しなかんらしい

-declare module '@mui/material/styles/createTypography' {
+declare module '@mui/material/styles' {
-  interface TypographyOptions {
+  interface TypographyVariantsOptions {
     // ...
   }

-  interface Typography {
+  interface TypographyVariants {
     // ...
   }
 }

GridとGrid2のリネーム

それぞれのコンポーネントがリネームされる

  • Grid → GridLegacy
  • Grid2 → Grid

deprecatedされるGridを使っていて、アップグレードするならこちらのcodemodを使用できる

npx @mui/codemod v7.0.0/grid-props <path/to/folder>

InputLabel の size prop の標準化

size="normal" という指定は削除され、Buttonなど他コンポーネントに合わせsize="medium” という指定になった。

-<InputLabel size="normal">Label</InputLabel>
+<InputLabel size="medium">Label</InputLabel>

codemodmp使用できる

npx @mui/codemod v7.0.0/input-label-size-normal-medium <path/to/folder>

SvgIconのdata-testidの削除

@mui/icons-materialからexportされているiconsのデフォルトdata-testidが、本番向けバンドルで削除された。必要な場所でのみdata-testidプロパティが宣言されることを確実なものにした。

Themeの振る舞い変化

カラーモードを変更した時に余計な再描画が走らないようにしてパフォーマンスが向上された。

style指定の際は theme.vars.* を使用することが奨励されている。

const Custom = styled('div')(({ theme }) => ({
  color: theme.vars.palette.text.primary,
  background: theme.vars.palette.primary.main,
}));

DeprecatedAPIの削除

v5でDeprecatedとマークされたAPIがv7で削除された。

createMuiTheme function

createMuiTheme関数は削除されたため、createThemeを代わりに使用する。

-import { createMuiTheme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';

Dialog's onBackdropClick prop

Dialog コンポーネントのonBackdropClick propsが削除された。onClose コールバックのreasonプロパティを代わりに使用することができる。

function Example() {
  const [open, setOpen] = React.useState(false);

  const handleClose = (event, reason) => {
    if (reason === 'backdropClick') {
      // Handle the backdrop click
    }
    setOpen(false);
  };

  return (
    <Dialog open={open} onClose={handleClose}>
      {/* Dialog content */}
    </Dialog>
  );
}

experimentalStyled function

experimentalStyledが削除された。

-import { experimentalStyled as styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';

Hidden and PigmentHidden components

HiddenとPigmentHiddenコンポーネントが削除された。

// Use the sx prop to replace implementation="css":
-<Hidden implementation="css" xlUp><Paper /></Hidden>
+<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />

-<Hidden implementation="css" mdDown><Paper /></Hidden>
+<Paper sx={{ display: { xs: 'none', md: 'block' } }} />

// Use the useMediaQuery hook to replace implementation="js":
-<Hidden implementation="js" xlUp><Paper /></Hidden>
+const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
+return hidden ? null : <Paper />;

Modal's onBackdropClick prop

ModalコンポーネントのonBackdropClick propsが削除された。onClose コールバックのreasonプロパティを代わりに使用することができる。

function Example() {
  const [open, setOpen] = React.useState(false);

  const handleClose = (event, reason) => {
    if (reason === 'backdropClick') {
      // Handle the backdrop click
    }
    setOpen(false);
  };

  return (
    <Modal open={open} onClose={handleClose}>
      {/* Modal content */}
    </Modal>
  );
}

Rating's MuiRating-readOnly CSS class

MuiRating-readOnlyclassが削除された。

-.MuiRating-readOnly
+.Mui-readOnly

StepButtonIcon type

StepButtonIcon型エイリアスが削除された。

-import { StepButtonIcon } from '@mui/material/StepButton';
+import { StepButtonProps } from '@mui/material/StepButton';

-StepButtonIcon
+StepButtonProps['icon']

StyledEngineProvider import path

StyledEngineProviderのimportパスが変更された。

-import { StyledEngineProvider } from '@mui/material';
+import { StyledEngineProvider } from '@mui/material/styles';

Lab components moved to the main package

@mui/lab からexportされていた以下のコンポーネントとhooksが@mui/material に移動された。

  • Alert
  • AlertTitle
  • Autocomplete
  • AvatarGroup
  • Pagination
  • PaginationItem
  • Rating
  • Skeleton
  • SpeedDial
  • SpeedDialAction
  • SpeedDialIcon
  • ToggleButton
  • ToggleButtonGroup
  • usePagination
-import Alert from '@mui/lab/Alert';
+import Alert from '@mui/material/Alert';

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

codemodが提供されている。

npx @mui/codemod v7.0.0/lab-removed-components <path/to/folder>