Emotion.js 与 create-react-app: ReferenceError: jsx is not defined

Question

我正在尝试将 Emotion.js 与 create-react-app 和 TypeScript 一起使用。 在documentation 之后，我添加了@emotion/core，使用了import {jsx, css} from '@emotion/core'; 并在我的文件顶部添加了/** @jsx jsx */。

但是当我运行应用程序时，会抛出以下错误：

ReferenceError: jsx is not defined

这是我的示例组件：

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

错误被抛出的那一行是函数的定义：export const Header: React.FunctionComponent<{}> = () => (

任何帮助如何使它工作（除了弹出 create-react-app 脚本）将不胜感激。

Answer 1

更新：根据 github 上的 comment，情感现在应该开箱即用。

解决方案是在文件中的某处放置jsx; 语句，如下所示：

/** @jsx jsx */

import {jsx, css} from '@emotion/core';
import React from 'react';
import {NavigationBar} from "./NavigationBar";

jsx;

export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

Answer 2

要添加到 Johannes Klauß 的答案，您无需引用 jsx;

您只需要 pragma 语句（顶行和导入）：

/** @jsx jsx */
import { jsx } from "theme-ui"

例子：

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


export const Header: React.FunctionComponent<{}> = () => (
  <div css={{
    backgroundColor: 'hotpink',
    '&:hover': {
      color: 'lightgreen'
    }
  }}>
    <NavigationBar/>
    Test
  </div>
);

您可能需要添加：

/** @jsxRuntime classic */

如果使用 theme-ui 和 next.JS 也是如此