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

一、Gatsby 中使用 css 的方式

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

代码语言：txt复制

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 代码。

代码语言：txt复制

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

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

代码语言：txt复制

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

代码语言：txt复制

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？

网站建设 css

0 人点赞