将 gatsby 与 Emotion 结合使用时，无样式内容 (FOUC) 的闪现？

Question

我正在尝试将 Emotion 添加到现有的 Gatsby 静态站点。它通常工作得很好除了服务器渲染实际上并不渲染样式。在加载后的一小段时间里，或者如果您禁用了 JavaScript，则永远只能看到一个 .js 全局样式文件。

我已经尝试了 https://www.gatsbyjs.org/docs/troubleshooting-common-errors 中关于清除缓存、确保模块已安装以及将软件包版本更新到最新版本的步骤。运气不好。

这是可以处理的已知问题吗？

您可以在 https://github.com/JoshuaKGoldberg/Goldblog/tree/945d0ca8501b3aa069ef44145e4d05daa35da505 查看完整的存储库。

Answer 1

您正在使用 @emotion/core，它使用 css 道具，但是您将样式标记传递给 className 道具，如果您使用的 emotion 包需要额外设置才能使服务器端呈现正常工作。 See this page in the documentation for a comparison and more details.

解决方法是首先删除围绕样式对象字面量的 css() 函数调用：

// replace this
export const header = css({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: "1.5rem",
});

// with this
export const header = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "row",
  flexWrap: "wrap",
  marginTop: "1.5rem",
}

然后将 className 替换为 css 任何你传递的要使用 Emotion 的对象或数组：

// replace this
<header className={styles.header}>
  <h1 className={styles.heading}>
    <Link className={styles.headingLink} to={`/`}>
      {title}
    </Link>
  </h1>
  <Bio />
</header>

// with this
<header css={styles.header}>
  <h1 css={styles.heading}>
    <Link css={styles.headingLink} to={`/`}>
      {title}
    </Link>
  </h1>
  <Bio />
</header>

将 gatsby 与 Emotion 结合使用时，无样式内容 (FOUC) 的闪现？

Flash of Unstyled Content (FOUC) when using gatsby with Emotion?

fouc

emotion

reactjs

server-side-rendering

gatsby