Emotion.js 安装与基础使用指南

Emotion.js 安装与基础使用指南

emotion 👩‍🎤 CSS-in-JS library designed for high performance style composition 项目地址: https://gitcode.com/gh_mirrors/em/emotion

什么是 Emotion.js

Emotion.js 是一个强大的 CSS-in-JS 库，它允许开发者直接在 JavaScript 中编写 CSS 样式。与传统的 CSS 或 CSS 预处理器不同，Emotion 提供了更灵活的样式编写方式，支持动态样式、主题切换等功能，同时保持了良好的开发体验和性能优化。

安装 Emotion.js

根据你的项目需求，Emotion 提供了不同的安装方式：

1. React 项目安装

对于 React 项目，推荐使用 @emotion/react 包：

# 使用 yarn
yarn add @emotion/react

# 使用 npm
npm install --save @emotion/react

安装后，你可以直接在 JSX 中使用 css 属性来添加样式：

import { css } from '@emotion/react'

const style = css`
  color: hotpink;
`

function MyComponent() {
  return <div css={style}>这段文字会显示为粉红色</div>
}

2. 使用 styled 组件

如果你喜欢 styled-components 的写法，可以额外安装 @emotion/styled：

# 使用 yarn
yarn add @emotion/styled

# 使用 npm
npm install --save @emotion/styled

使用示例：

import styled from '@emotion/styled'

const StyledButton = styled.button`
  color: hotpink;
  background: white;
  border: 1px solid hotpink;
  padding: 8px 16px;
`

function App() {
  return <StyledButton>这是一个粉红色按钮</StyledButton>
}

3. 非 React 项目安装

如果你的项目不使用 React，可以使用 @emotion/css 包：

# 使用 yarn
yarn add @emotion/css

# 使用 npm
npm install --save @emotion/css

使用示例：

import { css } from '@emotion/css'

const myStyle = css`
  color: hotpink;
  font-size: 24px;
`

// 应用到 DOM 元素
const element = document.getElementById('app')
element.classList.add(myStyle)

配置 Babel 插件（可选）

为了获得更好的开发体验和性能优化，建议安装 @emotion/babel-plugin：

# 使用 yarn
yarn add --dev @emotion/babel-plugin

# 使用 npm
npm install --save-dev @emotion/babel-plugin

然后在 .babelrc 或 babel.config.js 中配置：

{
  "plugins": ["@emotion"]
}

重要提示：@emotion 插件必须放在 Babel 插件列表的首位。

开发环境与生产环境配置

如果你使用 Babel 的 env 配置，需要确保每个环境下 @emotion 插件都是第一个：

{
  "env": {
    "production": {
      "plugins": ["@emotion", "其他插件..."]
    },
    "development": {
      "plugins": ["@emotion", "其他插件..."]
    }
  },
  "plugins": ["@emotion"]
}

使用 Create React App 的项目

如果你使用的是 Create React App，不能直接修改 Babel 配置，可以使用 Babel 宏：

yarn add @emotion/babel-macro

然后在代码中这样引入：

import { css } from '@emotion/react/macro'
// 或者
import styled from '@emotion/styled/macro'

样式编写方式

Emotion 支持两种样式编写语法：

1. 模板字符串语法（类似传统 CSS）：

const style = css`
  color: hotpink;
  &:hover {
    color: darkpink;
  }
`

2. 对象语法：

const style = css({
  color: 'hotpink',
  '&:hover': {
    color: 'darkpink'
  }
})

两种语法可以混合使用，根据个人喜好选择。

总结

Emotion.js 提供了灵活多样的安装和使用方式，无论你是 React 开发者还是使用其他框架，甚至是纯 JavaScript 项目，都能找到合适的集成方案。通过简单的安装步骤，你就可以开始在 JavaScript 中编写强大的样式逻辑，享受 CSS-in-JS 带来的开发便利。

emotion 👩‍🎤 CSS-in-JS library designed for high performance style composition 项目地址: https://gitcode.com/gh_mirrors/em/emotion