With Material-UI the latest Next.js 9 implementation example has flash of unstyled content

Here's a working example:

https://nodeco-web.fillipvt.now.sh/

You'll see it well-styled for a split second and then the white font disappears from the buttons

Here's the repo for said reproduction case: https://github.com/fillipvt/nodeco-web

What am I doing wrong?

I followed exactly the same example described here:

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

And also followed the guide to implement along with emotion.js here:

https://material-ui.com/guides/interoperability/#the-styled-api

Any help is appreciated!

Edit: By disabling caching in the web browser you'll be able to see the FOUC clearer

Solution

The solution ended up being adding the StylesProvider helper from @material-ui/styles to look something like this in _app.js

import { StylesProvider } from "@material-ui/styles";

// ...
      <Container>
        <Head>
          <title>My page</title>
        </Head>
        <ThemeProvider theme={theme}>
          <StylesProvider injectFirst> // added this
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <Component {...pageProps} />
          </StylesProvider>
        </ThemeProvider>
      </Container>

Here's the issue where it was solved.