title: Problem with using Emotion with Gatsby.js
body: <p>I am following this tutorial of Gatsby about using Emotion. <a href="https://www.gatsbyjs.org/docs/recipes/styling-css#using-emotion" rel="nofollow noreferrer">https://www.gatsbyjs.org/docs/recipes/styling-css#using-emotion</a></p>
  
  <p>I installed the Emotion using <code>npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled</code> and set up my <code>gatsby-config.js</code> file like this</p>
  
  <pre class="lang-js prettyprint-override"><code>
  module.exports = {
    plugins: [`gatsby-plugin-emotion`],
  }
  </code></pre>
  
  <p>But when I was using it like the tutorial did, I encountered a problem where the inline-css of the component is <code>[object Object]</code></p>
  
  <p>My component looks like this</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react"
  import { css } from "@emotion/core"
  
  export default ({ children }) =&gt; (
    &lt;main
      css={{
        backgroundColor: "red",
      }}
    &gt;
      {children}
    &lt;/main&gt;
  )
  </code></pre>
  
  <p>and I tried to rewrite using a different approach</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react"
  import { css } from "@emotion/core"
  
  export default ({ children }) =&gt; (
    &lt;main
      css={css`
        background-color: red;
      `}
    &gt;
      {children}
    &lt;/main&gt;
  )
  </code></pre>
  
  <p>this time the inline-css of the component is a paragraph </p>
  
  <pre><code>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). 
  </code></pre>
  
  <p>have no ideas why these two approach didn't work</p>