Actualización del JavaScript de la interfaz de usuario de Material a la versión 5

Utilice el origen del paquete Git para actualizar el JavaScript de la interfaz de usuario de Material a la versión 5.

Before you begin

Aplique los pasos que se indican a continuación al código fuente de la tienda antes de utilizar el origen del paquete Git para actualizar el JavaScript de la interfaz de usuario de Material a la versión 5.
Si no ha cambiado la carpeta predeterminada HCL Commerce packages:
1. Ignore cualquier paso que mencione un cambio de código dentro de la carpeta packages.
2. Copie y sustituya la carpeta predeterminada packages por la versión más reciente.
  Note: No se recomienda realizar ningún cambio en la carpeta predeterminada packages de HCL Commerce.
3. Compare y fusione el código fuente de la carpeta React-store con la última versión del código.

Procedure

Consulte https://mui.com/material-ui/migration/migration-v4/ para obtener un fondo claro.

Ejecute los mandatos siguientes:

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

Elimine las dependencias antiguas de la interfaz de usuario de Material de los archivos package.json.
Realice una búsqueda global y sustituya la importación con el estilo de "styled-components por la importación con el estilo de "@mui/styled-engine-sc";
Ejecute la carpeta de comandos npx @mui/codemod v5.0.0/preset-safe src/elements por carpeta.
Note:
- La operación perderá algunos de los componentes. Asegúrese de ejecutar este comando solo una vez, ya que realizará la mayor parte del trabajo de búsqueda y sustitución.
- Si ejecuta este comando dos veces, el resultado será incorrecto.
Actualice la función de espaciado de temas.
1. Realice una búsqueda global de theme.spacing(", remove 'px'. e.g. ${theme.spacing(3)}px a ${theme.spacing(3)}
2. Para calcular el tamaño utilizando el parámetro theme.spacing, utilice la función CSS calc.
Por ejemplo, una búsqueda global a partir de la anchura máxima de: ${window.innerWidth - theme.spacing(3)}px; a max-width: calc(${window.innerWidth}px - ${theme.spacing(3)});.
Actualice la función Con estilo. Para obtener más información, consulte https://mui.com/system/styled/.
Por ejemplo, en el caso del elemento HTML Native, la función Styled-Component se utilizó anteriormente con la sintaxis styled.div. Ahora se ha cambiado a styled("div").
Si procede, lleve a cabo los pasos necesarios para Interrumpir los cambios en la v5, parte uno: estilos y temas e Interrumpir los cambios en la v5, parte dos: componentes principales. Asimismo:
1. Actualice MUI Picker actualizando el Proveedor útil de Picker. Para obtener más información, consulte https://mui.com/material-ui/migration/v5-component-changes/.
2. Actualice MUI Popper actualizando la propiedad del modificador a matriz en lugar de dejarla como objeto. Para obtener información detallada, consulte https://popper.js.org/docs/v2/migration-guide/.
Compruebe todos los componentes y páginas para identificar posibles problemas y soluciones.
Por ejemplo, los problemas relacionados con el motor de pasos estilizado se pueden resolver añadiendo almohadillas y los problemas relacionados con el balance se pueden resolver actualizando el acordeón.
Asegúrese de fusionar los archivos, ya que la lógica de análisis del componente MUI predeterminada se añadirá en el gancho use-espot.tsx, que da soporte a las propiedades básicas de contenedor, cuadrícula y tipografía.
Ejecute una compilación.
1. Añada la configuración de acumulación para correlacionar mui/styled-engine con mui/styled-engine-sc mientras utilizamos un componente Styled.
2. Utilice Craco para añadir la configuración de WebPack para correlacionar mui/styled-engine con mui/styled-engine-sc. Para obtener más información, consulte craco.config.js en la carpeta de la tienda React.
3. Actualice el archivo tsconfig para obtener una similitud en las correlaciones de mui/styled-engine y mui/styled-engine-sc.

Results

El JavaScript de MUI se habrá actualizado correctamente.