Emotion（CSS-in-JS 库）

Emotion 是一款流行的 CSS-in-JS 库，让开发者在 JavaScript 中编写具有局部作用域的样式，并将样式与组件逻辑紧密结合，从而解决全局命名冲突与样式维护难题。

概述

Emotion 于 2017 年发布，提供了灵活的编写方式：既可用类似标签模板字符串的语法书写传统 CSS，也可用 JavaScript 对象描述样式。它在构建或运行时生成唯一类名，将样式自动注入页面，避免样式相互污染。虽然常与 React 搭配，其核心也可脱离框架使用。

核心特点

• 作用域隔离：为每段样式生成唯一类名，从根本上避免全局样式冲突。
• 双写法支持：同时支持字符串模板与对象样式，兼顾迁移旧 CSS 与动态计算的需求。
• 动态样式：样式可直接读取组件属性与状态，轻松实现基于数据的条件渲染样式。
• 主题能力：内置主题机制，便于统一管理配色、间距等设计变量并实现换肤。

应用场景

Emotion 常用于组件库和需要高度动态样式的界面开发。当样式需随属性、状态频繁变化，或团队希望把样式与组件封装在一起以提升可维护性时，它是常见选择。不少设计系统与开源 UI 库以 Emotion 作为底层样式方案。

常见问题

问：CSS-in-JS 会影响性能吗？答：运行时生成样式会带来一定开销，在极端场景下需关注。可通过服务端渲染注入、样式提取等手段优化；对性能极敏感的项目也可考虑零运行时的方案。

问：Emotion 和 styled-components 有何异同？答：两者理念相近、API 相似。Emotion 提供更灵活的写法与更小的核心，styled-components 则以组件化写法闻名，可按团队习惯选择。