How to Migrate from Material-UI 4 to 5

In this article I’ll share with you my own experience in migration from material UI 4 to 5, it is so easy, such as drinking a cup of coffee.

Ok, let's go

first of all, you need to upgrade your React js version at least to v17.0.0 (mine is v17.0.2),

after that if your project is using TypeScript, you’ll need to upgrade your TypeScript version at least to v3.5. (mine is v4.4.3).

so if your project includes ” react-scripts”, “@types/react”, “@types/react-dom “, please upgrade them to the latest version.

please make sure your project is up and running correctly.

then make sure “ThemProvider” is defined at the root of your project, now it's time for updating the MUI version:

//with `npm`
npm install @mui/material @mui/styles @mui/icons-material @mui/lab @mui/x-date-pickers

//with `yarn`
yarn add @mui/material @mui/styles

you can see all packages changes below:

@material-ui/core -> @mui/material
@material-ui/system -> @mui/system
@material-ui/unstyled -> @mui/core
@material-ui/styles -> @mui/styles
@material-ui/icons -> @mui/icons-material
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
@material-ui/docs -> @mui/docs
@material-ui/envinfo -> @mui/envinfo
@material-ui/pickers -> @mui/x-date-pickers

as you see packages name changed from “@material-ui” to “@mui”

Then, you need to add the new peer dependencies “emotion packages”:

//with `npm`
npm install @emotion/react @emotion/styled

//with `yarn`
yarn add @emotion/react @emotion/styled

Or if you want to use “styled-components” as a styling engine:

// with npm
npm install @mui/material @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

Ooops , you have many pages and componnets that they are using “@material-ui/“ ,it takes alot of time from you for checking whole the files and change them!
but no worry,there is a fantastic tool for helping you with a single command,

that tool is “Codemods”,

The material UI team has prepared this Codemod to ease your migration experience, you can run it at the root of your project,

npx @mui/codemod v5.0.0/preset-safe ./

it may take some minutes, but it is so great, after that, you’ll need to build your project and fix the component's build-time errors based on v5 components.

Migrating from JSS @mui/style to

npx @mui/codemod@latest v5.0.0/jss-to-styled  ./

Once you migrate all of the styling, remove unnecessary @mui/styles by uninstalling the package.

npm uninstall @mui/styles

Resource : https://mui.com/guides/migration-v4/

https://mui.com/blog/lab-date-pickers-to-mui-x/

https://mui.com/material-ui/migration/migrating-from-jss/