CSS-in-JS综述：样式化React组件

我们将一起看看根据 GitHub 总星数评出的前 15 个 CSS-in-JS 库。 我们将比较它们的特点、优势和劣势。 包括一些真正的新库，例如 emotion，以及一些原始库，例如 aphrodite。

如果你和我一样，你花了一段时间才登上 CSS-in-JS 的火车。 如果您不确定那是什么，那么值得查看 @vjeux 的原始“React：JS 中的 CSS”幻灯片 。 快进近三年，今天不乏 CSS-in-JS 库来帮助我们使用 JavaScript 设计 React 组件。 事实上，在撰写本文时，@MicheleBertoli 的 css-in-js 存储库 中列出了 55 个这样的库，这是一个巨大的集中库列表，其中包含如何设置基本按钮样式的各个示例每个图书馆。 超级有帮助！

大约每六个月左右，就会出现一个新的图书馆。 这种变化速度并没有引起 JavaScript 疲劳，而是非常令人鼓舞！ 每种新方法都建立在先前库的优势之上，并针对先前库的一些缺点进行创新。 虽然一些较新的库提供了更多的功能和性能，但对于一些较旧的库的寿命仍有一些话要说，这也是它们被包括在内的原因。 在决定下一个项目使用哪个时，请记住这一点。

为简洁起见，我们将在此处保持简短，并且不包含任何代码示例。 如果您想了解每个库的使用方式，请查看每个项目的 GitHub 链接以阅读其完整描述。

情感

emotion 是新来的。 但就它的时代而言，它不仅提供了一系列令人印象深刻的功能，而且似乎也在极快地获得牵引力。 它追求出色的开发人员体验和对性能的痴迷。 这里的杀手级功能是样式组件的组合，以及为嵌套组件提供传统选择器的能力。 emotion 绝对值得关注。

• 年龄： 3个月
• 星星： 1.5k ⭐
• GitHub： https://github.com/tkh44/emotion
• 标语：“下一代 CSS-in-JS”。 Emotion 是一个高性能、轻量级的 CSS-in-JS 库。 Emotion 通过在编译期间而不是在运行时使用 PostCSS 解析样式，极大地降低了 css-in-js 的运行时成本。
• 特点： 动画、动态道具、媒体查询、嵌套选择器、伪选择器、服务器端渲染、任意组件样式、主题

魅力四射

glamorous 包装了流行的 glamor 库并提供类似 styled-component 的体验，但使用 JavaScript 语法而不是插值字符串。 动态道具是这个库比其他库的一大胜利，主题也是如此。 如果你想尝试使用 JavaScript 语法创建样式化的 React 组件，glamorous 可能适合你。

• 年龄： 6个月
• 星星： 2k ⭐⭐
• GitHub： https://github.com/paypal/glamorous
• 标语： 使用 React 可维护的 CSS
• 特点： 动态道具，媒体查询，React Native，服务器端渲染，样式任何组件，主题

样式化的 jsx

styled-jsx 允许您在组件的渲染函数中添加 <style jsx /> 标签。 这允许您使用纯 CSS 编写样式，其中的 CSS 仅适用于在该级别呈现的 DOM 的当前范围。 如果你想在你的 render 函数中混合你的 CSS，styled-jsx 有你的名字。

• 年龄： 9个月
• 星星： 2k ⭐⭐
• GitHub： https://github.com/zeit/styled-jsx
• 标语： 对 JSX 的完整、范围和组件友好的 CSS 支持（在服务器或客户端上呈现）。
• 特点：动画、动态道具、服务器端渲染、主题

jsxstyle

jsxstyle 让您忘记考虑仅用于样式目的的 HTML 元素（例如，<div />、<span />、<table /> 等），而是使用这些样式组件（<Block />、<Flex />、<Inline />、<Table /> 等）。 它也无视 CSS 的许多规范，而是提供了一种有趣的开发人员体验，即能够将伪选择器指定为道具（例如，hoverColor）。 如果您希望消除第 100 次编写 <div className={styles.container} /> 的乏味，您应该查看 jsxstyle。

• 年龄： 9个月
• 星星： 1.5k ⭐
• GitHub： https://github.com/smyte/jsxstyle
• Tagline: jsxstyle 旨在成为样式化 React 组件的最佳方式。 它的目标是在不牺牲性能的情况下获得一流的开发人员体验，并且很少考虑现有的 CSS 正统观念
• 特点：伪选择器

类型风格

TypeStyle 是 CSS 的 TypeScript——因此得名。 重点是编译时 linting、自动完成等。 以确保良好的开发人员体验并防止运行时问题。 最重要的是，它与框架无关，因此您可以学习一次并在任何地方使用它。 如果你已经是 TypeScript 的粉丝，那么 TypeStyle 值得一看。

• 年龄： 9个月
• 星星： 1.5k ⭐
• GitHub： https://github.com/typestyle/typestyle
• Tagline: 使用 TypeStyle 编写 CSS 将与使用 TypeScript 编写 JavaScript 一样流畅。
• 特点：动画、媒体查询、伪类、服务端渲染

样式化组件

毫无疑问，最流行的 CSS-in-JS 库，styled-components 解决了这个问题。 与其向现有组件添加样式，不如创建 包含 样式的组件。 这允许介于常规 HTML 元素和成熟的 React 组件之间的声明性和可重用组件。 这种哲学，以及 GraphQL 式的字符串插值，需要一点时间来适应，但鉴于它的流行度几乎是第二名的 CSS-in-JS 库的两倍，可以肯定地说这里有一些值得一看的东西在。

• 年龄： 1年
• 星星： 9.5k ⭐⭐⭐⭐⭐⭐⭐⭐
• GitHub： https://github.com/styled-components/styled-components
• Tagline: 组件时代的视觉原语。 使用最好的 ES6 和 CSS 来设计你的应用程序而没有压力
• 特点： 动画、动态道具、媒体查询、嵌套选择器、服务器端渲染、React Native、样式任何组件、主题

魅力

glamor 的真正强大之处在于它能够让您编写和组合 CSS 规则。 通常，扩展/覆盖 CSS-in-JS 规则可能很麻烦； 但是，glamor 可以让您在组件的 props 中按顺序放置它们，或者在其 className 中列出它们。 如果您正在寻找一个值得信赖的“您所期望的”库，那么看看 glamor。

• 年龄： 1年
• 星星： 2.5k ⭐⭐
• GitHub： https://github.com/threepointone/glamor
• 标语： 用于反应等的内联 css
• 特点：媒体查询、嵌套选择器、伪选择器、服务器端渲染、React Native、任何组件样式、主题

风格电子

styletron 声名鹊起的是它的速度，源于它使用“虚拟 CSS”（如“虚拟 DOM”），它抽象了 JS 到 CSS 的转换，以提供优化、加速，死CSS修剪等。 特别关注的是在服务器端渲染中最小化注入的 CSS，以加快页面加载时间。 如果您正在寻找能够大幅提升速度的良好开发人员体验，请从查看 styletron 开始。

• 年龄： 1年
• 星星： 2k ⭐⭐
• GitHub： https://github.com/rtsao/styletron
• 标语： 通用、高性能的 JavaScript 样式。
• 特点：动画、动态道具、媒体查询、服务器端渲染、任意组件样式

镭

radium 是最初的 CSS-in-JS 库之一，旨在解决处理媒体查询、伪选择器和修饰符的问题。 它仍然是那里最受欢迎的库之一，这说明了它的实用性和寿命。

• 年龄：2岁
• 星星： 5.5k ⭐⭐⭐⭐⭐
• GitHub： https://github.com/FormidableLabs/radium
• Tagline: Radium 是一组用于管理 React 元素的内联样式的工具。 它为您提供强大的样式功能，无需 CSS。
• 特点： 动画、媒体查询、伪选择器、服务器端渲染、样式任何组件、主题

反应 CSS 模块

react-css-modules 接近于能够在你的 React 组件中编写纯 CSS。 从字面上看，您导入 .css 文件并在 className 属性中使用它们的键。 作为最早的 CSS-in-JS 库之一，它试图解决的主要问题是 CSS 选择器的作用域。 值得看看 babel-plugin-react-css-modules 是否能满足您的需求。 尽管它的功能较少，但它是一个更小的包，并且性能更高。

• 年龄：2岁
• 星星： 4k ⭐⭐⭐⭐
• GitHub： https://github.com/gajus/react-css-modules
• Tagline: React CSS Modules 实现 CSS 模块的自动映射。 每个 CSS 类都被分配了一个具有全局唯一名称的局部范围标识符。 CSS Modules 实现了模块化和可重用的 CSS！
• 特点：嵌套选择器，伪选择器

阿芙罗狄蒂

aphrodite 由可汗学院的好人编写和维护。 作为最初的 CSS-in-JS 库之一，它试图解决的主要问题是获得 CSS-parity 但使用 JavaScript 语法。 因此，重点是选择器、媒体查询、动画等。 如果您正在寻找一个受人尊敬的库，它的寿命与已建立的维护者一样，aphrodite 可能会成为 JS 库风暴中的锚。

• 年龄：2岁
• 星星： 3.5k ⭐⭐⭐
• GitHub： https://github.com/Khan/阿芙罗狄蒂
• 标语： 与框架无关的 CSS-in-JS，支持服务器端渲染、浏览器前缀和最小 CSS 生成
• 特点：动画、动态道具、媒体查询、服务端渲染

反应CSS

作为最初的 CSS-in-JS 库之一，reactcss 专注于基于 props 动态交换样式。 虽然这是许多较新的库的功能，但应该注意的是，这是当时领先的功能。 它仍然值得一看，特别是如果需要完整的 CSS 支持（包括 Autoprefixing）或 React Native 支持。

• 年龄：2岁
• 星星： 1.5k ⭐
• GitHub： https://github.com/casesandberg/reactcss
• 标语： JS 中的内联样式，支持 React、React Native、自动前缀、悬停、伪元素和媒体查询
• 特点： 动态道具、媒体查询、React Native

👉 非常感谢 @MicheleBertoli 和 css-in-js 的所有其他贡献者。