emotion-js/emotion

这是什么？

核心功能

• 01支持字符串和对象两种样式书写方式。
• 02提供 css 属性以及 styled-components 风格的 API。
• 03样式组合可预测，避免选择器优先级问题。
• 04提供 source map 和标签，便于调试。
• 05生产环境中大量缓存样式。
• 06可选的 Babel 插件，提供额外优化。

适用场景

• 为 React 应用编写基于 props 或动态变化的样式。
• 构建可组合复用的组件库样式。
• 从独立样式表迁移到与组件同位置的样式写法。

快速上手

1. 1

   使用 npm 安装核心包

   npm install --save @emotion/react
2. 2

   从 Emotion 导入 jsx 并在组件上使用 css 属性

使用前须知

• !Babel 插件是可选的，但部分功能需要它。

标签

常见问题

emotion 是什么？

一个高性能、灵活的 CSS-in-JS 库，支持用字符串或对象编写样式，并可预测地组合样式。 Emotion 允许你在 JavaScript 中用字符串或对象语法编写组件样式。样式在运行时生成并以 CSS 形式应用，因此可以直接根据 props 和状态改变外观，无需维护单独的样式表。

emotion 可以免费使用吗？用的什么许可证？

emotion 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

emotion 还在维护吗？

半年内有更新。emotion 最近一次提交是在 2026年8月28日。

emotion 适合用来做什么？

为 React 应用编写基于 props 或动态变化的样式。 构建可组合复用的组件库样式。 从独立样式表迁移到与组件同位置的样式写法。

emotion 怎么安装和运行？

使用 npm 安装核心包: npm install --save @emotion/react 从 Emotion 导入 jsx 并在组件上使用 css 属性

在哪里获取 emotion？

源代码和安装说明在 GitHub 上：https://github.com/emotion-js/emotion