Question

如果我安装了emotion，则该API非常清晰明了：

package.json：

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

反应成分：

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

package.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导入会收到棉绒警告。

推荐方式的好处是什么？我很想忽略文档，而以旧的方式来做。

Answer 1

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

也就是说，将它包含在每个文件中都是乏味的-这就是为什么有一个babel plugin为您执行此操作的原因。

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

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

CSS道具支持

类似于样式道具，但增加了对嵌套选择器，媒体查询和自动前缀的支持。

允许开发人员直接跳过样式化的API抽象以及样式化组件和元素。

css prop还接受以您的主题作为参数调用的函数，以使开发人员可以轻松访问常见和可自定义的值。

组成组件并使用情感进行样式设置时减少样板。



零配置的服务器端呈现。

主题可以直接使用。

可用来确保设置正确的模式和配置的ESLint插件。

@ emotion / core超过情绪对React项目有什么好处？

1 个答案: