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

Posted 2023-02-22

【中文标题】在 Emotion 11/Next js 10 应用程序中启用 css 道具的正确方法是啥

【英文标题】：What is the proper way to enable the css prop in Emotion 11/Next js 10 apps在 Emotion 11/Next js 10 应用程序中启用 css 道具的正确方法是什么

【发布时间】：2021-05-15 21:03:39

【问题描述】：

css 属性在构建时无法识别。我不确定这是否是由于项目配置错误，或者这是否代表已知错误。

Type ' children: (string | number | boolean | | ReactElement ReactElement 组件)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | Element)[];类名：字符串； css：序列化样式； ' 不可分配给类型 'IntrinsicAttributes & theme?: Theme;作为？：元素类型； & ClassAttributes & htmlAttributes<...> & ...; '。类型'IntrinsicAttributes＆主题？：主题; 属性'css'不存在作为？：元素类型； & 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

【参考方案1】：

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

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

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

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

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

【讨论】：

谢谢！如文档中所述，我最终修改了 tsconfig，因为此应用程序使用自动运行时。 "compilerOptions": "jsxImportSource": "@emotion/react"

【参考方案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"