Upgrading the Material UI JavaScript to version 5
Use the Git bundle source to upgrade the Material UI JavaScript to version 5.
Before you begin
- Apply the steps given below to your store source code before using the Git bundle source to upgrade the Material UI JavaScript to Version 5.
- If you have not changed the default HCL Commerce
packages folder:
- Ignore any step that mentions a change of code inside the packages folder.
- Copy and replace the default packages folder with
the latest version.Note: It is not recommended to make any change in the default packages folder of HCL Commerce.
- Compare and merge the source code of the React-store folder with the latest version of code.
Procedure
- Refer to https://mui.com/material-ui/migration/migration-v4/ to get a clear background.
-
Run the following commands:
npm install @mui/material @mui/styles npm install @mui/lab npm install @mui/icons-material npm install @mui/material @mui/styled-engine-sc styled-component
- Remove old material UI dependencies from package.json files.
- Do a global search and replace import styled from "styled-components with import styled from "@mui/styled-engine-sc";
-
Run the
npx @mui/codemod v5.0.0/preset-safe src/elements
command folder by folder.Note:- The operation will miss some of the components. Be sure to only run this command once as it will do most of search and replace work for you.
- If you run this command twice, the result will be wrong.
-
Update theme spacing function.
-
Do a global search from
theme.spacing(", remove 'px'. e.g. ${theme.spacing(3)}px
to${theme.spacing(3)}
- To calculate the size using the theme.spacing parameter, use the CSS calc function.
For example, a global search from max-width: ${window.innerWidth - theme.spacing(3)}px; to max-width: calc(${window.innerWidth}px - ${theme.spacing(3)});. -
Do a global search from
-
Update the Styled function. For details see https://mui.com/system/styled/.
For example, in case of Native HTML element, the Styled-Component function was previously used with the syntax styled.div. It is now changed to styled("div").
-
If applicable, do the steps for Breaking changes in v5, part one: styles and themes
and Breaking changes in v5, part two: core
components. Also:
- Update the MUI Picker by updating the Picker Util Provider. For details see https://mui.com/material-ui/migration/v5-component-changes/.
- Update the MUI Popper by updating the modifier property to array instead of object. For details see https://popper.js.org/docs/v2/migration-guide/.
-
Check all components and pages to identify potential issues and fixes.
For example, issues related to styled stepper that can be resolved by adding padding and issues related to summary can be resolved by updating the accordion.
- Ensure that you merge the files, because the default MUI component parsing logic is added in the use-espot.tsx hook, which supports basic container, grid, and typography properties.
-
Run a build.
- Add roll-up configuration for mapping mui/styled-engine to mui/styled-engine-sc as we are using a styled-component.
- Use craco to add webpack configuration for mapping mui/styled-engine to mui/styled-engine-sc. For more details see craco.config.js in the react-store folder.
- Update tsconfig file for a similarity in maps of mui/styled-engine and mui/styled-engine-sc.