# Migrating from Material-UI v4 to v5

1. **Upgrade solution using latest version of our webapp generator.**

{% embed url="<https://github.com/osstotalsoft/generator-webapp-rocket>" %}

Below there is a list with all MUI packages and their new version, in case generator doesn't cover all Material-UI packages that you use.

<details>

<summary>Material-UI packages old -> new version</summary>

`@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`

</details>

This version includes:

1. Material-UI packages at v5.x
2. React and React-DOM at v17.x
3. Tss-React and Emotion packages that are needed for new MUI version
4. New bit packages (core & themes)
5. Refactored styles and infrastructure components

#### &#x20;    2. Overriding styles

The style library used by default in v5 is Emotion, which is also what we recommend. JSS itself is no longer supported in MUI. However, if you like the hook-based API (makeStyles → useStyles) that react-jss was offering you can opt for `tss-react.`

To continue using `makeStyles` these are the necessary changes:

* Install `tss-react` package

```javascript
npm install tss-react
```

* Import `makeStyles` from `tss-react` package

{% code overflow="wrap" lineNumbers="true" %}

```javascript
//old way
import import { makeStyles } from '@material-ui/core'
//new way
import { makeStyles } from 'tss-react/mui'
```

{% endcode %}

* Call makeStyles

{% code overflow="wrap" lineNumbers="true" %}

```javascript
//old way
const useStyles = makeStyles(headerStyle)
//new way
const useStyles = makeStyles()(headerStyle)
```

{% endcode %}

* classes

{% code overflow="wrap" lineNumbers="true" %}

```javascript
//old way
const classes = useStyles()
//new way
const { classes } = useStyles()
```

{% endcode %}

&#x20;    3\. After upgrading using generator webapp-rocket and change all makeStyles (if any) usage, we recommend to upgrade each feature in your project with components from bit.&#x20;

‼ For each component we created a changelog that contains breaking-changes, new features and other modifications in order to make this upgrade easier. For example: [Buttons](/migrating-to-rocket-ui/deprecated-totalsoft_oss-rocket-ui-bit-components/buttons.md)

{% code overflow="wrap" lineNumbers="true" %}

```javascript
//old way
import { IconButton } from '@bit/totalsoft_oss.react-mui.kit.core'
//new way
import { IconButton } from '@totalsoft_oss/rocket-ui.core'
```

{% endcode %}

Check out our new components library for more information

{% embed url="<https://github.com/osstotalsoft/rocket-ui>" %}

&#x20;    4\. Fix breaking changes in raw Material-UI components (if it's the case).

If you're using any raw Material-UI components, check out their migration guide here:\
<https://mui.com/material-ui/migration/v5-component-changes/>&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://totalsoft.gitbook.io/migrating-to-rocket-ui/migrating-from-material-ui-v4-to-v5.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.