reactjs - @emotion/core 对 React 项目的情感有什么好处？

Question

如果我安装 emotion那么 API 很好而且很清晰:

包.json:

"dependencies": {
  "emotion": "^10.0.9",

react 组件:

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

const someStyle = css`
    display: none;
`

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

但是根据文档你应该安装@emotion/core:
https://emotion.sh/docs/introduction

包.json:

"dependencies": {
  "@emotion/core": "^10.0.15",

现在 API 变得更加困惑了:

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

const someStyle = css`
  display: none;
`;

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

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

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

Answer 1

jsx pragma/import 是必需的，因为 css prop 由 React.createElement 周围的包装器提供- 没有应用该转换，css Prop 不起作用。

也就是说，将它包含在每个文件中是乏味的 - 这就是为什么有 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.