Migration to v3

Please read the whole guide before you start

Material UI 5 migration guide

Update React and @cegid/cds-react

We are currently having problems with the @latest tag on @cegid packages. Check the latest stable version with npm info <pkg-name> versions

Run npm i react@latest react-dom@latest @cegid/cds-react@latest @emotion/react@latest @emotion/styled@latest
If there are conflict issues, start by installing react and emotion then the CDS.

In the case your project uses Typescript, also run npm i -D typescript@latest @types/react@latest @types/react-dom@latest

Run the codemods

npx @cegid/codemod mui5/cds-react/init <srcPath>
npx @mui/codemod v5.0.0/jss-to-tss-react <srcPath>
npx @mui/codemod v5.0.0/preset-safe <srcPath>
npx @cegid/codemod mui5/cds-react/complete <srcPath>

Finish the migration

See React 18 upgrade guide.

Visit https://mui.com/material-ui/migration/migration-v4/ to browse the migration guide.

Implement all the manual changes specified there.

Important: you shouldn't install/run any packages/codemods mentioned in the guide. At this step, everything should be up to date.

Migrating from JSS (additional to mui guide)

All styles in @cegid/cds-react were migrated to tss-react, and this is what we recommend that you use (the second codemod will take care of this migration). You can also use the new sx prop for small style changes.

If you use params in your makeStyles you have to move them at the root of the function :

const useStyles = makeStyles((theme) => ({
    text: {
      color: ({color}) => color
    },
  }));

const useStyles = makeStyles()((theme, {color}) => ({
    text: {
      color: color
    },
  }));

Additional changes

These changes "fix" some things implemented by mui codemods:

Button: mui5 changes the default color prop from default to primary (we do the same) and also removes color="default", if it's defined, from all buttons. We introduced color="neutral" as a replacement for default and our codemods will replace color="default" with color="neutral" and will also add color="neutral" to all the buttons that don't specify a color. This takes care that you're buttons keep their correct color.
IconButton: mui5 adds a new size value: large and adds size="large" to all IconButtons that don't specify a size, in order to keep the same button dimensions as in mui4. Our codemods remove size="large", because this change is not needed for @cegid/cds-react.

Pickers

The pickers (DatePicker, DateTimePicker and TimePicker) underwent multiple changes, and there's no codemod to help with the transition.

Please visit https://mui.com/x/react-date-pickers/getting-started/ for more information.

Design System