Razzle: 样式的水合未正确渲染

创建于 2018-10-03 · 5评论 · 资料来源: jaredpalmer/razzle

爱炫耀，这样一个伟大的工具。

我在设置 Material UI 时遇到了一个问题，除了一件事之外，一切都运行得非常好：当访问子页面并刷新页面时，我会看到一个只有最少样式的页面。这实际上是一个令人着迷的错误，因为根据从最后一个yarn start打开的页面，它只会在刷新时正确呈现该页面，但如果我导航和刷新它将不起作用（即使在根路径上）。

使用yarn start启动服务器
例如转到http://localhost:3000/blog-posts
刷新页面（一切看起来都像废话）
杀死服务器（保持浏览器窗口打开）
使用yarn start启动服务器
刷新页面，它看起来很漂亮（正确渲染所有内容）
导航到_any_另一个页面
刷新，看起来像垃圾......然后重复。

我尝试了yarn build && yarn start:prod并且系统运行，但只有最少的样式。但是，如果我找到一个链接并单击它，那么整个应用程序就会再次看起来很漂亮。

我假设这是水合物的问题，或者可能是它和@material-ui/core/styles/withStyles某种组合。你们中有人遇到这个问题吗？

这些类在后续页面加载时是不同的（呈现 html ），这意味着它可能与同构样式/类的初始加载有关，我知道这与以下讨论有关：

但是，正如我上面的情况所示，它似乎在某些时候起作用，这让我认为它比那些讨论看起来更接近。想法？

资料来源

panbanda

最有用的评论

你会认为经过漫长乏味的研究和调试后会更令人满意，但修复基本上是使用 after.js，react-jss，生成你自己的Document ，然后在底部的行该线程的（关于仅与 MUI 相关的 MuiThemeProvider）：

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

愿大家远离痛苦。 :P

panbanda 于 2018-10-08

🎉4

所有5条评论

哈哈哈哈我在 Razzle 的 Material UI 上遇到了同样的问题😢

CharlyJazz 于 2018-10-03

❤4

@CharlyJazz这非常（en|dis）令人鼓舞。哈哈，你有没有尝试从他们的withStyles实现转移到同构类？

panbanda 于 2018-10-06

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

愿大家远离痛苦。 :P

panbanda 于 2018-10-08

🎉4

@jaredpalmer @jylinman不能为razzle文档创建一个这样的例子吗？

CharlyJazz 于 2018-10-08

对于遇到此问题的其他人，我强烈建议您遵循官方 Material-UI SSR 文档： https :

jacobfunch 于 2019-01-08

此页面是否有帮助？

0 / 5 - 0 等级

Razzle: 样式的水合未正确渲染

最有用的评论

所有5条评论

相关问题