Mise à niveau de Material UI JavaScript vers la version 5

Utilisez la source de groupement Git pour mettre à niveau Material UI JavaScript vers la version 5.

Before you begin

Appliquez les étapes ci-dessous à votre code source de magasin avant d'utiliser la source de groupement Git pour mettre à niveau Material UI JavaScript vers la version 5.
Si vous n'avez pas modifié le dossier HCL Commerce packages par défaut :
1. Ignorez toute étape qui mentionne un changement de code dans le dossier packages.
2. Copiez et remplacez le dossier packages par défaut par la dernière version.
  Note: Il est déconseillé de modifier le dossier packages par défaut de HCL Commerce.
3. Comparez et fusionnez le code source du dossier React-store avec la dernière version du code.

Procedure

Reportez-vous à https://mui.com/material-ui/migration/migration-v4/ pour obtenir un arrière-plan clair.

Exécutez les commandes suivantes :

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

Supprimez les anciennes dépendances d'interface utilisateur matérielles des fichiers package.json.
Effectuez une recherche globale et remplacez import styled from "styled-components par import styled from "@mui/styled-engine-sc";
Exécutez le dossier de commandes npx @mui/codemod v5.0.0/preset-safe src/elements par dossier.
Note:
- L'opération manquera certains composants. Veillez à n'exécuter cette commande qu'une seule fois, car elle effectuera la plupart des travaux de recherche et de remplacement pour vous.
- Si vous exécutez cette commande deux fois, le résultat sera erroné.
Mettez à jour la fonction d'espacement du thème.
1. Effectuer une recherche globale de theme.spacing(", remove 'px'. e.g. ${theme.spacing(3)}px à ${theme.spacing(3)}
2. Pour calculer la taille à l'aide du paramètre theme.spacing, utilisez la fonction CSS calc.
Par exemple, une recherche globale à partir de max-width: ${window.innerWidth - theme.spacing(3)}px; jusqu'à max-width: calc(${window.innerWidth}px - ${theme.spacing(3)});.
Mettez à jour la fonction Styled. Pour plus d'informations, voir https://mui.com/system/styled/.
Par exemple, dans le cas d'un élément HTML natif, la fonction Styled-Component était précédemment utilisée avec la syntaxe styled.div. Elle est désormais remplacée par styled("div").
Le cas échéant, procédez comme suit pour Breaking changes in v5, part one: styles and themes et Breaking changes in v5, part two: core components. Egalement :
1. Mettez à jour MUI Picker en mettant à jour Picker Util Provider. Pour plus de détails, voir https://mui.com/material-ui/migration/v5-component-changes/.
2. Mettez à jour MUI Popper en mettant à jour la propriété modificateur en matrice au lieu de l'objet. Pour plus de détails, voir https://popper.js.org/docs/v2/migration-guide/.
Vérifiez tous les composants et pages pour identifier les problèmes et correctifs potentiels.
Par exemple, les problèmes liés à l'incrémenteur de mise en forme qui peuvent être résolus en ajoutant un remplissage et les problèmes liés au récapitulatif peuvent être résolus en mettant à jour l'accordéon.
Assurez-vous de fusionner les fichiers, car la logique d'analyse syntaxique du composant MUI par défaut est ajoutée dans le crochet use-espot.tsx, qui prend en charge les propriétés de conteneur, de grille et de typographie de base.
Exécutez une génération.
1. Ajoutez une configuration de cumul pour le mappage mui/styled-engine en mui/styled-engine-sc, car nous utilisons un composant de mise en forme.
2. Utilisez craco pour ajouter la configuration webpack pour le mappage mui/styled-engine en mui/styled-engine-sc. Pour plus de détails, voir craco.config.js dans le dossier react-store.
3. Mettez à jour le fichier tsconfig pour obtenir une similarité dans les mappes mui/styled-engine et mui/styled-engine-sc.

Results

Le fichier JavaScript MUI est mis à jour.