We are running the new Material-UI v4.9.5 library alongside v0 and it's working flawlessly.

Let's talk about React library upgrades. Imagine a world where instead of scrambling to get all of your components off old versions and on to the new in one release, you could be more methodical and upgrade components as you touch them by slow-playing the new version. 

I totally realize that statement is like duh considering this is only possible if the library itself has accounted for this type of migration path. But if you're here because you're about to embark on a large Material UI upgrade, I'm happy to report they freaking nailed it.

MUI Theme Provider to the Rescue

Theming and inline CSS were my biggest fears before we embarked on our upgrade journey. Material UI v0 was a nightmare of inline CSS layering funkiness and I knew going into this that trying to unpack all of that just wasn't going to be fun; however, I was confident it was absolutely doable. That said, I had no clear sight as to how we'd tackle theming, a roadblock that would single-handedly destroy our idea to have the two versions co-exist for a period of time.

Much to my delight, I learned that Material-UI v4.9 allows you to nest the old v0 theme (MUIThemeProvider) with the new v4.9 theme (ThemeProvider).

Here's what you want to do if you find yourself running an old and a new version of Material-UI:

v0 Theming

const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    //your main app
  </MuiThemeProvider>
);

v4.9.5 Theming

<ThemeProvider theme={outerTheme}>
  //your main app
</ThemeProvider>

Take the old theme and nest it inside the new theme like this:

<MuiThemeProvider muiTheme={muiTheme}>
   <ThemeProvider theme={outerTheme}>
      //your main app
   </ThemeProvider>
</MuiThemeProvider>

Old components will pull from the settings on the MUIThemeProvider while new UI components will pull from the settings of the ThemeProvider so for a temporary period of time you may need to make concessions on both sides so they can look decently similar.

Finishing the Upgrade

My suggestion is that you upgrade by functional area of your software versus by type of UI components. So for instance, when you upgrade a wrapper component (ex: Dialog) to use the new material UI component, upgrade all of the components inside of that to also use the new version. Yes, it will work without doing that because you can import from both mui versions in the same component, but you start to lose your primary and secondary colors among other things when you do that which can make things look funky.

Slow-playing an upgrade such as Material UI is way safer from a testing and overall stability perspective considering these components are atomic pieces to a very large puzzle.

More stability and less bugs equates to a happy business. Good luck :)