Step 1

OK, I moved off of Next.js to Remix, and it was not too difficult. The most painful piece was the one I anticipated: Material-UI from v4 to v5, specifically styling.

Material-UI/@mui (Moving from v4 to v5)

Styling

Lots of pieces to this, but the ones that stick out are converting the styling from makeStyles to the Emotion styled approach. Quick lesson is that you can take the same object that you might have used in v4, like this:

const useStyles = makeStyles((theme) => ({
  welcomeContainer: {
    backgroundColor: "white",
  },
  welcome: {
    minHeight: 1000,
    zIndex: 5,
...

and just create a "styles" object like this:

const styles = {
  welcomeContainer: {
    backgroundColor: "white",
  },
  welcome: {
    minHeight: 1000,
    zIndex: 5,

And then apply them with @mui's sx property. Now, since div's don't have sx, you need to turn those into Box's to apply them.

<div className={classes.whatever}>...

to

<Box sx={styles.whatever}>...

Your other option is to use the styled approach on components. I ended up doing both, depending on... my mood, I guess?

<div className={classes.whatever}>
    stuff in div
</div>

to

const WhateverDiv = styled('div')({
   backgroundColor: 'white',
   ...
})

<WhateverDiv>stuff in div</WhateverDiv>

The Real Bear, Emotion Caching Something-Something

What happens with Remix, more or less, is that everything gets rendered on the server and piped up to the client, which then basically re-renders it and freaks out if the client version doesn't match the server version.

What can happen in the situation I'm describing is that the rendering matches, but for some reason, the styles don't get applied. I'm honestly not completely clear on what's going on with that, but it's related to the way Emotion caches styles.

It's a bad scene.

I'm going to point you to this example that @mui provides that cuts to the chase of the answer: Just do this.

A real developer would spend hours and hours figuring out why this works.

Anyway, got all of that working and published to Remix (which I'll talk about next time...). Now I just need to figure out why the animations no longer work. Stay tuned....