Migrate Material-UI 4 to Mui-5
Tags: webdev, frontend, javascript, react
Published: 2021-10-09 12:07:38

---
title: Migrate Material-UI 4 to Mui-5
published: true
description: we'll be migration the legacy Material-ui 4 to Material-ui 5 (mui-5). in the version we've got to see alot of amazing stuff.
tags: #webdev #frontend #javascript #react 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htmgfgfy1dfg5aq47boc.png
---

A month ago the Mui team released version 5 of `Material-ui` . they made some changes in this version, and some of them we'll need to configure at our own aymore. let's have a depth look over it!

***prerequisite:***
- first make sure to commit your code before upgradation
- Install the latest packages of `react`, `react-dom`, and `react-scripts`.

## Installation
They rename the packages name from 
`@material-ui/core` to `@mui/material`
`@material-ui/lab` to `@mui/lab`
`@material-ui/icons` to `@mui/icons-material`

and additionally we also need to install the `@emotion` for the style as they deprecated their styles APIS like `makeStyle` and move to `@mui/system` lib. now you either use the `@emotion` or `styled-components`.

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

### Installing @motion/styled
```sh
$ yarn add @mui/system @emotion/react @emotion/styled
# NPM
$ npm i @mui/system @emotion/react @emotion/styled
```

### Installing styled-components
For the `yarn` user there is good news: we can simples alias the styled-components package and BOOM. to do so, add the following lines in the `package.json` file and run again `yarn` it will install the `@mui/styled-engine-sc` as [style-engine](https://mui.com/guides/styled-engine/) and also install the `styled-components`.  remove the previously installed  `@emtion/*` style lib.

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

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmyyz9w0bgo7tt57779p.png)

### installing fonts
by default, it before gave us the `robot` font. now we're responsible for [installing and hosting the font](https://mui.com/components/typography/#general) for yourself. there're few way to use fonts in react app, the recommended is  self-hosted, so we're using `@fontsource` to install font:

```sh
$ yarn add @fontsource/roboto
# NPM
$ npm install @fontsource/roboto
```
 
now we need to import it to entry point like where you're wrapping `ThemeProvider` or either in `theme.js` file:

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

## Configuration Global Theme Object
the `createMuiTheme` renamed to `createTheme`, also the [structure of theme has changed in v5](https://mui.com/customization/theming/#heading-createtheme-options-args-theme). [`adaptV4Theme`](https://mui.com/guides/migration-v4/#theme-structure) helper allow you to iteratively upgrade some of theme changes to new theme structure structure. but will be removed this soon in the next version.

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

the `fade` renamed the `alpha`:
```js
import { alpha } from '@mui/material/styles';

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

ThemeProvider:

```js
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>
  );
}
```

## Update all codebase
as the package name renamed, definitely you need to import the new package name. to do so, now what if you have a hundred of components will you do it manually? You can surely use `sed` and `awk` for the bulk changes. but we got another support which made the migration easy. we'll be using [`codemod`](https://mui.com/guides/migration-v4/#run-codemods) which sounds like as I said above plus more feature and some [warning](https://mui.com/guides/migration-v4/#run-codemods), which you should care of it:

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

replace the `src/components/Button` to your component's `path` and it'll rename the import package in the files. once the process done open up the file and see the import files, You should have new path imported:
```js
- import Avatar from '@material-ui/core/Button';
+ import Avatar from '@mui/material/Button';

```
`@mui/codemod v5.0.0/preset-safe` will do all the magic for you without to worry.

## Do we have makeStyles?
yes, we still have the `makeStyles` style API (but it's deprecated and will be removed in the next version). for that we need to install `@mui/styles` package:

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

alternative solution of this is to use the `sx` APIs, it support CSS project:
```js
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
```

another solution to migrate the `makeStyles` to `styled` using [codemod](<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>):

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

it generate new code style
```js
-const useStyles = makeStyles((theme) => ({
-  chip: {
-    padding: theme.spacing(1, 1.5),
-    boxShadow: theme.shadows[1],
-  }
-}))

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

## Final World
We're working on project where we were using `Material-ui` as the new version came out I decided to upgrade to new version and thankfully our team manager agreed. because I wanted to get most out of @mui new feature and changes. We've discuss some important topics which you need to know when doing migration. and I hope it helps you!

If you find this post helpful, please share it with family and friends, feel free to share any response on it!

twitter: [https://twitter.com/xericgit](https://twitter.com/xericgit)