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

Question

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

类型 '{ Children: (string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<任何，任何，任何>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | Element)[]; 类名：字符串；css：序列化样式；}' 不可分配给类型 'IntrinsicAttributes & { theme?: Theme; 作为？：元素类型；} & ClassAttributes & HTMLAttributes<...> & { ...; }'。类型“IntrinsicAttributes & { theme?: Theme;”上不存在属性“css” 作为？：元素类型；} & ClassAttributes & HTMLAttributes<...> & { ...; }'

重现：

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

1. npm 安装
2. 打开NavMenu.tsx
3. 检查18号线

预期行为：

该css道具应该在构建时被识别。

环境信息：

• 反应版本：17.0.1
• 下一个版本：10.0.5
• @情感/反应版本：11.1.5

Answer 1

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

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

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

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

查看Emotion 的 TypeScript 文档以获取更多详细信息。