在 Emotion 11/Next js 10 应用程序中启用 css 道具的正确方法是什么

Question

构建时无法识别 css 道具。我不确定这是由于项目配置错误造成的，还是这是一个已知错误。

Type '{ children: (string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | Element)[]; className: string; css: SerializedStyles; }' is not assignable to type 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'. Property 'css' does not exist on type 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'

重现：

https://github.com/jbcurrie/jbcurrie.github.io/tree/next

npm 安装
打开NavMenu.tsx
检查第 18 行

预期行为：

构建时应识别 css 道具。

环境信息：

反应版本：17.0.1
下一版本：10.0.5
@emotion/react版本：11.1.5

Answer 1

如果使用自动运行时，您应该能够通过将以下内容添加到您的 tsconfig.json.

来解决问题

{
    "compilerOptions": {
        "jsxImportSource": "@emotion/react"
    }
}

或者，将以下内容添加到您的 next-env.d.ts，这会在不使用自动运行时时为所有组件全局添加对 css 属性的支持。

/// <reference types="@emotion/react/types/css-prop" />

查看 Emotion's TypeScript documentation 了解更多详情。

Answer 2

这是一个带有情感的工作配置 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"
}

在 Emotion 11/Next js 10 应用程序中启用 css 道具的正确方法是什么

What is the proper way to enable the css prop in Emotion 11/Next js 10 apps

emotion

typescript

reactjs

next.js