CODEWITHSUNDEEP
javascriptcssversion-controlmigrationmaterial-ui
Bob Smith
Bob Smith

Reputation: 515

Updating to Material-UI v1.x.x

My app currently uses Material-/ui v0.17.0 and in order for it to work with React v16.0.0 I have to upgrade to Material-UI v1.0.0.

I have seen the migration tool here. This just updates the import statements more or less. A lot of the props appear to have changed and are not backwards compatible. The tool actually would not work for me so I manually updated all of my imports. It is almost looking like I have to rewrite the entire front end code of this app using the new updated v1.0.0 components. There has got to be a better way to do this. I understand that major version changes are "breaking" changes but this version upgrade may as well be an entirely new package. I cannot be the only person who has had to upgrade to v1.0.0 and am curious to how others have been able to successfully migrate over.

Upvotes: 4

Views: 2795

Answers (2)

Bob Smith
Bob Smith

Reputation: 515

For my specific project the solution seemed to be that I could use react v16.4.1 with material-ui v0.20.0. In doing so I had to drop react-tap-event-plugin which is not compatible with react versions >=16.4.0. This involved converting onTapEvent tags to onClick. Fortunately, by not having to upgrade the the new major version of material-ui, I did not have to update my components which was my fear.

All of this aside, I did spend some time converting material-ui components to v1.2.0 before I arrived at my solution which did not require these component modifications. When attempting to perform these changes, the documentation was sparse. I did find another Stack Overflow thread asking about the migration to v1.x.x here.

In that thread I linked to a couple of github issues that raised the same concern, and they are likely a valuable resource to keep your eye on if you yourself are trying to make this version transition.

[docs] 0.x => 1.x migration guide #7195

Codemod error when upgrading from v0.18.7 to v1.1.0 #11819

As well as some code someone documented when making the transition.

Here is a project where someone went through upgrading to mui 1.x.x from 0.x.x

Upvotes: 1

jedzej
jedzej

Reputation: 444

As you have noticed the API is not backward compatible and the migration guide is to be continued... I think there is a reason for that.

Although most of the components have their replacement, it looks like there is no straightforward way to migrate, especially because some components like autocomplete are not present in 1.x. If you heavily invested in restyling the components with touching the internals, you'll have even harder time, since in 1.x JSS is proposed way of styling.

The only way I see now is to rewrite it component by component. That's not something you'd like to read in the migration guide:)

Upvotes: 1

Related Questions