Emotion.js с create-реагировать-приложение: ReferenceError: jsx не определен

Question

Я пытаюсь использовать emotion.js с create-реагировать-приложение и 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<{}> = () => (

Любая помощь, как заставить это работать (кроме удаления сценариев create-реагировать-приложения), будет высоко ценится.

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>
);