Emotion.js与create app: ReferenceError: jsx未定义

Question

我正在尝试使用emotion.js与创建-反应-应用程序和TypeScript。在文档之后，我添加了@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<{}> = () => (

任何帮助如何使这个工作(除了弹出创建-反应-应用程序脚本)将是非常感谢的。

Answer 1

更新:根据github上的更新，情感应该马上就能正常工作。

解决方案是在文件的某个位置放置一个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;。

您只需使用杂注语句(顶部行和导入)：

/** @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 */

如果使用主题-ui和next.JS，也是如此。