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

What is the benefit of @emotion/react over @emotion/css for a React project?

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

package.json:

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

React 组件：

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 警告。

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

jsx pragma/import 是必需的，因为 css 道具是由 React.createElement 周围的包装器提供的 - 如果不应用该转换，css道具不行。

也就是说，将它包含在每个文件中是乏味的 - 这就是为什么 babel plugin 可以为您做到这一点。

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

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

  • CSS prop support
    • Similar to the style prop but adds support for nested selectors, media queries, and auto-prefixing.
    • Allows developers to skip the styled API abstraction and style components and elements directly.
    • The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.
    • Reduces boilerplate when composing components and styled with emotion.
  • Server side rendering with zero configuration.
  • Theming works out of the box.
  • ESLint plugins available to ensure proper patterns and configuration are set.

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

emotion/css:

  • 使用 vanilla react className prop
  • 没有自定义 jsx 解析器
  • 没有 babel 配置或文件 pragmas
  • 没有额外的打字稿配置
  • 在 React 组件之外生成 class 名称

emotion/react:

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

更多资源