4

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

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

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

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

4

1 回答 1

3

您正在使用@emotion/core，它使用css道具，但是您将样式标记传递给className道具，如果您使用emotion需要额外设置以使服务器端渲染工作的包，您将这样做。有关比较和更多详细信息，请参阅文档中的此页面。

解决方法是首先删除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>
于 2020-01-03T16:57:46.260 回答