✈️Migrating from Material-UI v4 to v5

Migrating from rocket-webapp-components to rocket-ui

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

LogoGitHub - osstotalsoft/generator-webapp-rocket: React web application sample with GraphQL, Apollo Client and AxaGuilDEv Oidc Client integration.GitHub

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.

Material-UI packages old -> new version

@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

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

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

npm install tss-react

  • Import makeStyles from tss-react package

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

  • Call makeStyles

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

  • classes

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

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.

‼ 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

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

Check out our new components library for more information

LogoGitHub - osstotalsoft/rocket-uiGitHub

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/

NextGetting started

Last updated