Gatsby中怎么使用emotion？

一、emotion是什么？

用 JavaScript 语法来写 css，主要用于两个框架：agnostic 和 React。下面是用于 React 框架的简单示例：

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>
)

---

二、使用步骤？

1、安装

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

---

2、配置

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

---

3、定义 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>
  )
}

---

4、使用 emotion

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

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

---

5、启动与访问

# 启动
gatsby develop

# 访问
http://localhost:8000/

---

三、参考文档

• Gatsby中怎么使用emotion？