Migration to v3

Please read the whole guide before you start

Material UI 5 migration guide

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

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>

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.

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
    },
  }));

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
```
.

The pickers (

DatePicker

DateTimePicker

and

TimePicker

) underwent multiple changes, and there's no codemod to help with the transition.