Gatsby中怎么在组件中使用css？

一、Gatsby 中使用 css 的方式

1、导入css文件的两种方式

import * as React from "react"
// 1、项目路径中导入css
import "../styles/index.css"
// 2、已安装包中导入css
import "bootstrap/dist/css/bootstrap.min.css"

export default function HomePage() {
  return <div>I'm styled by bootstrap & src/styles/index.css</div>
}

---

2、全局 css

使用 gatsby-browser.js 可以让样式变成全局样式。

---

3、组件样式

gatsby 为自动修改样式组件中的className，使其具有唯一性，避免与其他名称冲突而失效。

• 新建以 .module.css 为后缀的文件，在其中编写 css 代码。

  // src/components/my-component.module.css
  .title {
    color: blue;
    font-size: 3rem;
  }

• 在组件中调用上面的样式组件：

  // src/components/my-component.js
  import * as React from 'react'
  import { title } from './my-component.module.css'
  
  const MyComponent = () => {
    return (
      <h1 className={title}>
        Super Sweet Title Page
      </h1>
    )
  }
  
  export default MyComponent

---

4、样式组件+通用样式

container 是一个通用样式，即可配合 样式组件一起使用。即使 样式组件 变化，也不影响 container

import React from "react"
import * as containerStyles from "./container.module.css"

export default function Container({ children }) {
  return (
    <section className={`container ${containerStyles.container}`}>
      {children}
    </section>
  )
}

---

二、Gatsby 中用 emotion 写css

• 详情，看这里！

---

三、参考文档

• Gatsby中怎么在组件中使用css？