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

原创

Learn-anything.cn

发布于 2021-12-03 01:44:06

3.4K0

文章被收录于专栏：learn-anything.cnlearn-anything.cn

一、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>
  )
}