对于 React 项目，@emotion/react 相对于 @emotion/css 有什么好处？

Question

如果我安装了emotion/css，那么 API 就很清晰：

package.json:

"dependencies": {
  "@emotion/css": "^11.1.3",

反应组件：

import React from "react";
import { css } from "@emotion/css";

const someStyle = css`
    display: none;
`

function MyComponent() {
  return (
    <div className={someStyle} />
  );
}

但是根据文档，您应该安装@emotion/react： https://emotion.sh/docs/introduction

package.json:

"dependencies": {
  "@emotion/react": "^11.4.1",

现在 API 更加混乱了：

import React from "react";
/** @jsx jsx */
import { jsx, css } from "@emotion/react";

const someStyle = css`
  display: none;
`;

function MyComponent() {
  return (
    <div css={someStyle} />
  );
}

你不仅需要注释/** @jsx jsx */，而且你还必须导入jsx，即使它没有被使用。在我的 IDE 中，这意味着我的 React 导入会收到 lint 警告。

推荐的方式有什么好处？我很想忽略文档并按照旧方式进行。

Answer 1

jsx pragma/import 是必需的，因为 css 属性是由围绕 React.createElement 的包装器提供的 - 如果不应用该转换，css 属性将不起作用。

也就是说，将它包含在每个文件中很乏味 - 这就是为什么有一个 babel plugin 可以为您完成它。

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

关于使用此方法相对于 stock emotion 包的好处，文档在您链接的页面上列出了一些：

• CSS 道具支持
  • 类似于 style 属性，但增加了对嵌套选择器、媒体查询和自动前缀的支持。
  • 允许开发人员直接跳过样式化 API 抽象和样式化组件和元素。
  • css prop 还接受一个以您的主题作为参数调用的函数，使开发人员可以轻松访问通用和可自定义的值。
  • 在编写组件时减少样板代码并用情感设计样式。
• 零配置的服务器端渲染。
• 主题开箱即用。
• ESLint 插件可用于确保设置正确的模式和配置。

Answer 2

事实证明这是一个很好讨论的问题，自然每种方法都有其优点：

emotion/css:

• 使用香草反应classNameprop
• 没有自定义 jsx 解析器
• 没有 babel 配置或文件编译指示
• 没有额外的打字稿配置
• 在反应组件之外生成类名

emotion/react:

• @emotion/cache 的零配置
• 简单的服务器端渲染
• 通过 css 功能轻松访问主题

更多资源

• React vs Vanilla Essay
  • 香草过度反应的优点概述
• Github issue
  • 论文作者和情感开发者之间非常尊重的 github 讨论