在构建时无法识别cssprop。我不确定这是由于项目配置错误，还是这代表了一个已知的错误。
Type '{children: (string | number | boolean | {} | ReactElement<any,>reactelement_any, string |…| (new (props: any) =>Component<any,>)>) | (new (props: any) =>Component<……祝辞)比;| ReactNodeArray | ReactPortal | Element)[];名称:字符串;css: SerializedStyles;}'不能赋值给类型'IntrinsicAttributes &{主题?:主题;是吗?:应用;},ClassAttributes,HTMLAttributes<……比;,{……;}"。属性'css'不存在类型'IntrinsicAttributes &{主题?:主题;是吗?:应用;},ClassAttributes,HTMLAttributes<……比;,{……;} '
复制:https://github.com/jbcurrie/jbcurrie.github.io/tree/next
- npm安装
- 打开
NavMenu.tsx - 检查第18行
预期行为:
css道具应该在构建时被识别。
环境信息:
- react version: 17.0.1
- 下一个版本:10.0.5
- @emotion/react版本:11.1.5
如果使用自动运行时，您应该能够通过将以下内容添加到tsconfig.json中来解决此问题。
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}
或者，在不使用自动运行时时，将以下内容添加到您的next-env.d.ts中，这将为所有组件全局添加对cssprop的支持。
/// <reference types="@emotion/react/types/css-prop" />
查看Emotion的TypeScript文档了解更多细节。
这是一个带有情感和Next.js的工作配置
npm install @emotion/react @emotion/styled && npm i --save-dev @emotion/babel-plugin
yarn add @emotion/react @emotion/styled && yarn add -D @emotion/babel-plugin
.babelrc
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": ["@emotion/babel-plugin"]
}
package.json
"dependencies": {
"next": "10.1.3",
"react": "17.0.2",
"react-dom": "17.0.2"
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.3.0",
},
"devDependencies": {
"@emotion/babel-plugin": "^11.3.0"
}
我只是不想在这里留下一些信息，因为我不能评论公认的答案。
由于某些原因，我现在还不知道，当我选择这个选项:
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}
我的typescript开始与vite-plugin-svgr类型冲突，并且出现错误，组件类型不能为"Element | Null"
为了解决这个问题，我使用了第二个选项:
/// <reference types="@emotion/react/types/css-prop" />
小修复:如果我不维护这两个，我的应用程序失去了所有的样式，但如果我维护引用和jsxImportSource，一切工作正常
// @ts-ignore
将这个添加到你使用css props的行上，这将防止错误-如果你很少使用它，这很有用，如果你在整个应用程序中都有它们，那就不太好了。