材料UI 4をmui - 5に移行する

ヵ月前に、MUIチームは2010年のバージョン5をリリースしましたMaterial-ui . 彼らはこのバージョンでいくつかの変更を行い、それらのいくつか私たち自身のaymoreで設定する必要があります.それ以上の深さを見ましょう!
必要条件:

まずアップグレードする前にコードをコミットしてください

最新のパッケージをインストールするreact , react-dom , and react-scripts .

インストール
パッケージ名を@material-ui/core to @mui/material @material-ui/lab to @mui/lab @material-ui/icons to @mui/icons-materialまた、インストールする必要があります@emotion スタイルのために、それらのスタイルAPIを推奨しませんmakeStyle そして@mui/system リブ.これで、@emotion or styled-components .

$ yarn add @mui/material @mui/lab @mui/icons-material 
# NPM
$ npm i @mui/material @mui/lab @mui/icons-material

インストール@ Motion/スタイル

$ yarn add @mui/system @emotion/react @emotion/styled
# NPM
$ npm i @mui/system @emotion/react @emotion/styled

スタイルコンポーネントのインストール
のためにyarn ユーザは良いニュースです:スタイルのコンポーネントパッケージとブームのエイリアスを簡素化することができます.そのためには、次の行をpackage.json ファイルを再度実行yarn インストールする@mui/styled-engine-sc ASstyle-engine また、styled-components . 以前にインストールしたものを削除する@emtion/* スタイルリブ.

 {
   "dependencies": {
-    "@mui/styled-engine": "latest"
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
 }

フォントのインストール
デフォルトではrobot フォント.現在、我々は責任がありますinstalling and hosting the font あなた自身で.反応アプリでフォントを使用するいくつかの方法があります、推奨されている自己ホストされているので、我々は使用している@fontsource フォントをインストールするには

$ yarn add @fontsource/roboto
# NPM
$ npm install @fontsource/roboto

今、我々はあなたが包装している場所のようなエントリポイントにインポートする必要がありますThemeProvider またはtheme.js ファイル

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

構成グローバルテーマオブジェクト
the createMuiTheme 改称createTheme , またstructure of theme has changed in v5 . adaptV4Theme ヘルパーを反復的に新しいテーマ構造の構造にいくつかのテーマの変更をアップグレードすることができます.しかし、すぐに次のバージョンでは削除されます.

import { createTheme, adaptV4Theme } from '@mui/material/styles';
  const theme = createTheme(adaptV4Theme({
   // v4 theme
  });
}));

the fade と改名alpha :

import { alpha } from '@mui/material/styles';

backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),

ThemeProvider:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

function App() {
ThemeProvider
  return (
    <ThemeProvider theme={theme}>
       <CssBaseline />
       <Root />
    </ThemeProvider>
  );
}

すべてのコードベースを更新する
パッケージ名が変更されると、必ず新しいパッケージ名をインポートする必要があります.それを行うには、今の場合は、手動で何百ものコンポーネントがありますか?きっと使えますsed and awk を返します.しかし、我々は移動を簡単にするもう一つの支持を得ました.私たちは codemod 私は上記のように聞こえるより多くの機能といくつかのwarning , あなたはそれを気にかけるべきです.

$ npx @mui/codemod v5.0.0/preset-safe src/components/Button

置換するsrc/components/Button コンポーネントのpath そして、インポートパッケージをファイルに変更します.プロセスがファイルをオープンし、インポートファイルを見ると、インポートされた新しいパスが必要になります.

- import Avatar from '@material-ui/core/Button';
+ import Avatar from '@mui/material/Button';

@mui/codemod v5.0.0/preset-safe ウィルあなたのために心配することなく、すべての魔法を行います.

メイクスタイルはありますか?
はい、我々はまだmakeStyles スタイルAPI(ただし、推奨されず、次のバージョンで削除されます).そのためにインストールする必要があります@mui/styles パッケージ

import { createStyles, makeStyles, withStyles } from '@mui/styles';

これの別の解決策はsx これは、CSSプロジェクトをサポートしています

<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>

移動する別の解決策makeStyles to styled 使用

$ npx @mui/codemod v5.0.0/jss-to-styled <path>

新しいコードスタイルを生成

-const useStyles = makeStyles((theme) => ({
-  chip: {
-    padding: theme.spacing(1, 1.5),
-    boxShadow: theme.shadows[1],
-  }
-}))

// TO THIS
+const Root = styled('div')({
+  display: 'flex',
+})

ファイナルワールド
我々は、我々が使用していたプロジェクトに取り組んでいるMaterial-ui 新しいバージョンが出てきたので、新しいバージョンにアップグレードすることを決めました.なぜなら私は@ muiの新機能と変更を最大限に活用したかったからです.私たちは、移行をするときに知っておく必要がある重要なトピックを議論しています.そして、私はそれがあなたを助けることを望む!
あなたがこのポストに役立つとわかるならば、家族と友人とそれを共有してください、それの上でどんな反応でも共有するのを自由に感じてください!
Twitter