如何在 create-react-app 中使用 babel emotion 宏？

Question

我正在尝试在 create-react-app 中使用 emotion，但在使用宏方法 explained here 时出现错误。

我只是尝试在这样的组件中复制导入代码：

import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "@emotion/css/macro";
import styled from "@emotion/styled/macro";

function Registration(props) {
  return;
}

export default Registration;

我遇到的第一个错误是 Parsing error: Identifier 'css' has already been declared。所以我注释掉了 import css 和 import styled 行，看看它是否会 return 其他任何东西。这给了我错误 Cannot find module 'react-emotion/macro' from ....

我错过了哪一步？或者还有其他方法可以让我在应用程序中包含 emotion 吗？

Answer 1

回答我自己的问题，以防有人遇到同样的问题。对于 emotion 和 create-react-app 的 v10（我相信大于 v2），不需要 react-emotion。另外，我不需要 styled，所以使用以下它可以工作：

import React from "react";
import css from "@emotion/css/macro";

function Registration(props) {
  return
}

export default Registration;

如何在 create-react-app 中使用 babel emotion 宏？

How to user babel emotion macro in create-react-app?

emotion

reactjs

babeljs

create-react-app