HasOne

Posted on Oct 9, 2021 • Edited on Mar 2, 2022

Migrate Material-UI 4 to Mui-5

#webdev #frontend #javascript #react

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

Top comments (16)

damilola jerugba • Oct 9 '21

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 • Oct 10 '21

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 • Oct 11 '21

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

HasOne • Oct 11 '21 • Edited

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

damilola jerugba • Oct 11 '21

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

Hulya • Nov 4 '21

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 • Nov 25 '21 • 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 = {...}

Mui-5

yarn add @mui/system

import { createBreakpoints } from '@mui/system'

const breakpoints = createBreakpoints({})

export const defaultTheme = {...}

Eric Gish • Jan 19 '22

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

htorohn • Feb 22 '22

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 • Mar 2 '22

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

abhishekdam-Borderfree • Feb 8 '22

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 🧙‍♂️ • Oct 11 '21

Very well explained !!

Kamal Choudhary • Mar 8 '22 • 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!

Kamal Choudhary • Mar 11 '22 • 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.