reactjs - 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

更新:根据这个comment，情绪现在应该立即发挥作用。在 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>
);