Gatsby中怎么使用emotion？

import { css, cx } from '@emotion/css'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
cd global-styles
npm install gatsby-plugin-emotion @emotion/react @emotion/styled

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

// src/components/layout.js
import React from "react"
import { Global, css } from "@emotion/react"
import styled from "@emotion/styled"

const Wrapper = styled("div")`
  border: 2px solid green;
  padding: 10px;
`

export default function Layout({ children }) {
  return (
    <Wrapper>
      <Global
        styles={css`
          div {
            background: red;
            color: white;
          }
        `}
      />
      {children}
    </Wrapper>
  )
}

// src/pages/index.js
import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return <Layout>Hello world!</Layout>
}

# 启动
gatsby develop

# 访问
http://localhost:8000/