带有create-react-app的Emotion.js:ReferenceError:未定义jsx

时间:2019-01-02 12:37:29

标签: reactjs typescript create-react-app emotion

我正在尝试将motion.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脚本之外的帮助)都将不胜感激。

2 个答案:

答案 0 :(得分:5)

更新:根据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>
);

答案 1 :(得分:0)

要添加到 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 也是如此