React 的样式化组件 vs jss vs 情感

Posted 2023-02-22

【中文标题】React 的样式化组件 vs jss vs 情感

【英文标题】：Styled-component vs jss vs emotion for React

【发布时间】：2019-04-18 07:08:21

【问题描述】：

我试图了解（作为 CTO）之间的最佳选择

jss 情感 样式化组件。

我会尽量不要让这个问题“太宽泛”或“离题”，因为这是一个非常主观的话题。如果没有人回答整个问题，我会尝试自己回答（在这里）这个问题，我会问非常封闭的问题：

他们三个如何“编译成”（外部css、<style>标签、style=属性）？ 他们三个如何才能与 CRA 顺利集成（无需过多调整且无需弹出）？ OpenSource POV（年龄、社区、插件、支持）怎么样？ 性能怎么样？

请我不希望这个问题结束，所以我不想要一些代码风格的意见，我想避免主观的 POV。

【问题讨论】：

这是我第一次听说jss和emotion。样式组件似乎越来越受欢迎

备案 JSS 已被materialUI采用

@theFreedomBanana 并且在 v5 中一直是 deprecated。我很困惑为什么，我喜欢 JSS，material-ui 使用它的方式允许我在不知道它们的 DOM 结构的情况下定位组件的内部。我爱它。不过，我敢肯定，这一定是有原因的。

【参考方案1】：

一个非常简短的答案（一般来说还有很多）

CSS 模板字符串

SC 在运行时使用 CSS 解析模板字符串。 Emotion 有一个 babel 插件，可以以一种可以在运行时更快地呈现最终 CSS 的格式准备这些解析的东西。 JSS 目前只支持basic template strings，否则使用对象（有计划增加对模板字符串的更好支持）

更新样式规则

当你更新动态样式时，SC 和 Emotion 会生成新的 CSS 规则，JSS 会更新现有规则（注意你可以在开发工具的样式选项卡中看到更新的规则，但在样式标签中看不到）：reproduction

对 React 的依赖

SC 只是反应。 Emotion 有一种可以在没有反应的情况下使用的语法（css``）。 JSS 有单独的包：jss（核心，无反应），react-jss（HOC 注入类），styled-jss（SC 类 API）。

插件

目前只有 JSS 支持插件。

静态提取

目前只有 Emotion 支持完全静态提取。 JSS 也在努力。 如果您将样式放入单独的文件（something.styles.js）并使用 webpack 插件提取它们（虽然没有动态值），那么您现在可以使用 JSS 进行静态提取。

性能

http://necolas.github.io/react-native-web/benchmarks/

它们都使用样式标签生成实际的 CSS。

【讨论】：

AFAIK，如果你正在编写一个 lib，那么 styled-components 应该被列为 peerDependencies，你知道 styled-jss 是否也是这种情况？

【参考方案2】：

正如上面的答案，我也没有听说过jss和emotion。可能是因为它们与 React 结合起来并不常见。我自己使用过常规 CSS、内联样式、CSS 模块以及现在最新的样式化组件。

我喜欢 Styled 组件，因为它易于使用。所以回答（部分）你的问题是。

参见图片。这就是它与 Styled Components 一起编译的方式。它创建了独特的类。 不需要弹出。只需从 npm 导入并使用 认为它变得越来越流行，社区似乎也喜欢它。总是有不同的意见，也有很多人不喜欢在组件中混合样式和 JS 代码。 确实没有检查性能，但似乎很快。 =)

【讨论】：

只想提一下，在 1) 使用 babel-plugin 样式化组件可以使类名看起来更好，你甚至可以使用这个插件而不使用 babel 宏从 cra 中弹出.只需包含 styled-components/macro。