Gatsby中怎么使用emotion？

一、emotion是什么？

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

import { css, cx } from '@emotion/css'const color = 'white'render(<divclassName={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><Globalstyles={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？

Gatsby中怎么使用emotion？相关推荐

Gatsby中怎么在组件中使用css？
一.Gatsby 中使用 css 的方式 1.导入css文件的两种方式 import * as React from "react" // 1.项目路径中导入css import ...
Gatsby中怎么使用MDX？
一.MDX 是啥? MDX 是一种文档格式,可以在 Markdown 文档中无缝地插入 JSX 代码. import {Chart} from './snowfall.js' export const ...
Gatsby中怎么加载图片？
一.Gatsby页面怎么加载图片? 在编写网站页面时,总是会遇到有图片要显示,那么怎么加载这些图片呢? 1.Gatsby 中图片有三种形式: 本地图片,譬如 : src/images 目录下的图片: ...
Gatsby 中怎么加载使用文件资源？
一.Gatsby 怎么使用文件资源? 对于图片.音频.视频文.svg.字体等文件,怎么导入Gatsby中? 二.解决方案把文件导入到Gatsby项目中使用,有两种方式:import 和 stati ...
Gatsby 中怎么加载使用视频文件？
一.简介 Gatsby 项目中怎么播放视频? 二.解决方案 1.HTML5 <video> 使用 HTML5 的 video 标签,播放本地视频和远程视频. import * as ...
gatsby_什么是环境变量？如何在Gatsby和Netlify中使用它们？
gatsby When starting to integrate 3rd party services into your application or website, you'll start ...
gatsby_如何使用Gatsby.js来获取内容
gatsby by Dimitri Ivashchuk 由Dimitri Ivashchuk 如何使用Gatsby.js来获取内容 (How to source content with Gatsby ...
gatsby_将您的GraphCMS数据导入Gatsby
gatsby Let's set up Gatsby to pull data from GraphCMS. 让我们设置Gatsby来从GraphCMS中提取数据. This will be a wa ...
Gatsby 学习 - 03 Gatsby 插件
Gatsby 插件 Gatsby 框架内置插件系统,插件是为应用添加功能的最好的方式. 在 Gatsby 中有三种类型的插件: 数据源插件(source):负责从应用外部获取数据,将数据统一放在 Ga ...

Gatsby中怎么使用emotion？

一、emotion是什么？

二、使用步骤？

1、安装

2、配置

3、定义 emotion

4、使用 emotion

5、启动与访问

三、参考文档

Gatsby中怎么使用emotion？相关推荐

最新文章

热门文章