在我的React应用程序中使用@memotional/core时出错

Question

Picture1请帮忙，这些错误正在阻止我的react应用程序编译。我该如何修复它？我还附上了App.tsx文件的图片处理这个错误的另一个建议是什么？

找不到模块"@memotion/core"的声明文件c：/Users/nwoko/source/reso/KandA/QandAfontend/frontend/node_modules/@memotional/core/dist/ememotional-core.cjs.js'隐式具有"any"类型。尝试npm i --save-dev @types/emotion__core(如果存在(，或添加包含declare module '@emotion/core';ts(7016(的新声明(.d.ts(文件

类型"｛children:Element[]；css:any；｝"不可分配给类型"DetailedHTMLProps<HTMLAttributes，HTMLDivElement>'。类型"DetailedHTMLProps<"上不存在属性"css"；HTMLAttributes，HTMLDivElement>'。ts(2322(

图片2

Answer 1

利用@sanderdebr建议，

在将导入行更改为import { jsx, css } from '@emotion/react'之前，我运行了npm install --save @emotion/react，并消除了TypeScript错误TS7016

然后，我在tsconfig.json文件中添加了"types": ["@emotion/react/types/css-prop"]，以消除第二个ts错误(2322(

Answer 2

帮助我：

tsconfig.json

"types": ["@emotion/react/types/css-prop"],

*.tsx

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";

Answer 3

Emotion建议在他们的文档中使用@memotional/reflect。尝试使用命令npm install --save @emotion/react和import { jsx, css } from '@emotion/react'为React安装使用情感

Answer 4

使用/** @jsxImportSource @emotion/react */而不是/** @jsx jsx */

Answer 5

这很有效：

/** @jsxRuntime classic /
/* @jsx jsx */
import { jsx } from "@emotion/react";

Answer 6

使用新版本的MUI，您需要安装以下两个软件包：

npm install --save @emotion/react
npm install --save @emotion/styled