Emotion安装 #

前置要求 #

在安装 Emotion 之前，请确保你的项目满足以下要求：

Node.js 版本 >= 14.0.0
React 版本 >= 16.8.0（支持 Hooks）
包管理器：npm、yarn 或 pnpm

安装方式 #

方式一：React项目安装 #

对于 React 项目，安装核心包：

bash

# 使用 npm
npm install @emotion/react @emotion/styled

# 使用 yarn
yarn add @emotion/react @emotion/styled

# 使用 pnpm
pnpm add @emotion/react @emotion/styled

方式二：Next.js项目安装 #

Next.js 项目需要额外配置：

bash

# 安装依赖
npm install @emotion/react @emotion/styled @emotion/cache @emotion/server

创建或更新 next.config.js：

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    emotion: true,
  },
}

module.exports = nextConfig

方式三：Create React App项目 #

Create React App 需要配置 Babel 来支持 css prop：

bash

# 安装依赖
npm install @emotion/react @emotion/styled @emotion/babel-plugin

创建 .babelrc 文件：

json

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "@emotion"
  ]
}

方式四：Vite项目安装 #

Vite 项目配置更加简单：

bash

# 安装依赖
npm install @emotion/react @emotion/styled

Vite 原生支持 Emotion，无需额外配置即可使用 css prop。

包说明 #

@emotion/react #

核心包，提供 css prop 和 jsx 函数：

jsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

function App() {
  return (
    <div css={css`color: red;`}>
      Hello World
    </div>
  )
}

@emotion/styled #

提供 styled API，类似 styled-components：

jsx

import styled from '@emotion/styled'

const Button = styled.button`
  color: red;
`

TypeScript配置 #

如果你使用 TypeScript，Emotion 提供了完整的类型支持。

配置 tsconfig.json #

对于使用 css prop 的项目，需要在 tsconfig.json 中添加配置：

json

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

类型声明 #

创建 emotion.d.ts 文件以获得更好的类型提示：

typescript

import '@emotion/react'

declare module '@emotion/react' {
  export interface Theme {
    colors: {
      primary: string
      secondary: string
      background: string
      text: string
    }
    fontSizes: {
      small: string
      medium: string
      large: string
    }
  }
}

验证安装 #

创建一个简单的组件来验证安装是否成功：

jsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import styled from '@emotion/styled'

const containerStyle = css`
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
`

const Title = styled.h1`
  color: #333;
  font-size: 24px;
`

function App() {
  return (
    <div css={containerStyle}>
      <Title>Emotion 安装成功！</Title>
      <p>如果你能看到样式效果，说明 Emotion 已经正确安装。</p>
    </div>
  )
}

export default App

开发工具配置 #

VS Code 插件 #

安装以下插件获得更好的开发体验：

vscode-styled-components - 语法高亮和自动补全
Emotion Snippets - Emotion 代码片段

ESLint配置 #

安装 Emotion ESLint 插件：

bash

npm install eslint-plugin-emotion -D

在 .eslintrc 中添加配置：

json

{
  "plugins": ["emotion"],
  "rules": {
    "emotion/jsx-import": "error",
    "emotion/no-vanilla": "error",
    "emotion/import-from-emotion": "error",
    "emotion/styled-import": "error"
  }
}

常见问题 #

1. css prop 不生效 #

确保在文件顶部添加 jsx pragma：

jsx

/** @jsxImportSource @emotion/react */

或者在 tsconfig.json 中配置 jsxImportSource。

2. 样式闪烁 #

在 SSR 项目中可能出现样式闪烁，需要正确配置样式提取。

3. 类型错误 #

确保安装了 @types/react 并正确配置了 TypeScript。

下一步 #

安装完成后，继续学习第一个Emotion应用，开始编写你的第一个样式组件。