对于 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

两者都有效，每种方法都有其优点：

emotion/css：

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

emotion/react：

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

更多资源

• 反应与香草散文
  • 香草对反应的优点概述
• Github问题
  • 论文作者和情感开发人员之间非常尊重的github讨论

Answer 2

jsx编译指示/导入是必需的，因为css道具是由React.createElement周围的包装器提供的 - 如果不应用该转换，css道具将无法工作。

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

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

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

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