Question

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

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 也是如此

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

2 个答案: