DEV Community

Cover image for Migrate Material-UI 4 to Mui-5

Migrate Material-UI 4 to Mui-5

HasOne on October 09, 2021

A month ago the Mui team released version 5 of Material-ui . they made some changes in this version, and some of them we'll need to configure at ou...
Read full post
Collapse
 
damiisdandy profile image
damilola jerugba •

Nice, I personally don't like MUI, I love the fact that it has alot of components but visually it either looks too Google websity or generally unattractive. Plus it's so difficult to customize even after the new update

Collapse
 
eliasjnior profile image
Elias Júnior •

I think the same as you, but as you can see in the homepage, it's possible to have a custom theme, that makes a lot of difference. Maybe in some time we will see some good open-source/paid themes.

Collapse
 
hasone profile image
HasOne •

I think we already some of paid theme availabe in the mui market, thanks!

Collapse
 
hasone profile image
HasOne • • Edited

@damiisdandy I totally agree with you. but It give us ability to use our own design, thanks!

Collapse
 
damiisdandy profile image
damilola jerugba •

Yes I’m it does, just wasn’t as streamlined

Collapse
 
hulyakarakaya profile image
Hulya •

Hi, thanks for writing this post. I'm getting an error like this when I try to run the project.`Child process failed to process the request: Error: Debug Failure. False expression.

Did you have any problem like that? I have found this error happened in typescript's older versions but I have updated the Typescript module. Do you think this is another bug?

Similar to this: stackoverflow.com/questions/508366...

Collapse
 
gtech1256 profile image
Roman • • Edited

If someone uses breakpoints in their theme for createTheme(), then I have a solution for how to get breakpoints

Material-UI 4

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'

const breakpoints = createBreakpoints({})

export const defaultTheme = {...}
Enter fullscreen mode Exit fullscreen mode

Mui-5

yarn add @mui/system

import { createBreakpoints } from '@mui/system'

const breakpoints = createBreakpoints({})

export const defaultTheme = {...}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
gisheri profile image
Eric Gish •

Thank you for adding this snippet. I was trying to figure this out!

Collapse
 
htorohn profile image
htorohn •

I have a questions, to run the codemods, do I have to run it file by file, or if run it on the src folder it will go recursively applying the changes on all files?

Collapse
 
hasone profile image
HasOne •

You can do both methods either on each file or src, components...

Collapse
 
abhishekdamborderfree profile image
abhishekdam-Borderfree •

can anyone tell me what is the script for codemod for just changing the muiv4 icons to muiv5 icons (just the icons and nothing)?

Collapse
 
paras594 profile image
Paras 🧙‍♂️ •

Very well explained !!

Collapse
 
kamalchoudhary profile image
Kamal Choudhary • • Edited

thank you so much for the very helpful tutorial. One question though, I recently upgraded Material UI from 4 to 5 and all of the Dialog components show at the end of the pages - they cause the page scroll all the way to the bottom and then they display - any clue how can I solve this - thanks!

Collapse
 
kamalchoudhary profile image
Kamal Choudhary • • Edited

Found that my Dialog components had "position: relative" in the MUI 4 implementation and they were being shown in the right place - but in MUI 5, they work fine without adding that CSS property.

Collapse
 
csemorf profile image
csemorf •

good

Collapse
 
jblengino510 profile image
Josh Blengino •

So clutch, thank you!