Material-UI 最新的 Next.js 9 实现示例有 flash of unstyled content

Question

这是一个工作示例：

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

你会在一瞬间看到它的样式很好，然后白色字体从按钮上消失

这是上述复制案例的回购协议： https://github.com/fillipvt/nodeco-web

我做错了什么？

我遵循了此处描述的完全相同的示例：

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

并且还按照指南与 emotion.js 一起实施：

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

感谢任何帮助！

编辑：通过在网络浏览器中禁用缓存，您将能够更清楚地看到 FOUC

Answer 1

解决方案最终添加了 @material-ui/styles 中的 StylesProvider 助手，使其在 _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.

Material-UI 最新的 Next.js 9 实现示例有 flash of unstyled content

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

emotion

material-ui

next.js