在 Gatsby.js 中使用 Emotion 的问题

Question

我正在关注 Gatsby 的这篇关于使用 Emotion 的教程。 https://www.gatsbyjs.org/docs/recipes/styling-css#using-emotion

我使用npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled安装了 Emotion 并像这样设置我的gatsby-config.js文件

module.exports = {
  plugins: [`gatsby-plugin-emotion`],
}

但是当我像教程一样使用它时，我遇到了一个问题，组件的 inline-css 是[object Object]

我的组件看起来像这样

import React from "react"
import { css } from "@emotion/core"

export default ({ children }) => (
  <main
    css={{
      backgroundColor: "red",
    }}
  >
    {children}
  </main>
)

我试图用不同的方法重写

import React from "react"
import { css } from "@emotion/core"

export default ({ children }) => (
  <main
    css={css`
      background-color: red;
    `}
  >
    {children}
  </main>
)

这次组件的 inline-css 是一个段落

You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop). 

不知道为什么这两种方法不起作用

Answer 1

这对我有用（没有透彻的理解）：

方法01

替换这个：

import React from "react"
import { css } from "@emotion/core"

有了这个：

/** @jsx jsx */
import { css, jsx } from "@emotion/core"

方法 02

更新gatsby-config.js以包含插件gatsby-plugin-emotion ：

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
  ],
}

这需要重新启动 gatsby 开发过程。