Migrate Material-UI 4 to Mui-5

Liquid syntax error: Variable '{{%20border:%20">codemod:
{% raw %}' was not properly terminated with regexp: /\}\}/

Comments

[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

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

[HasOne]

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

[HasOne]

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

[damilola jerugba]

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

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

[Roman]

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 = {...}

Mui-5

yarn add @mui/system

import { createBreakpoints } from '@mui/system'

const breakpoints = createBreakpoints({})

export const defaultTheme = {...}

[Eric Gish]

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

[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?

[HasOne]

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

[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)?

[Paras 🧙‍♂️]

Very well explained !!

[Kamal Choudhary]

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!

[Kamal Choudhary]

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.

[csemorf]

good

[Josh Blengino]

So clutch, thank you!