reactjs - ¿Cuál es la manera correcta de habilitar la propiedad css en aplicaciones Emotion 11/Next js 10?

La propiedad css no se reconoce en el momento de la compilación. No estoy seguro si esto se debe a una configuración incorrecta del proyecto o si representa un error conocido.

El tipo '{ children: (string | number | boolean | {} | ReactElement ReactElement Component)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | Element)[]; className: string; css: SerializedStyles; }' no se puede asignar al tipo 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'. La propiedad 'css' no existe en el tipo 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'

Para reproducir:

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

1. npm instalar
2. abrir NavMenu.tsx
3. Inspeccione la línea 18

Comportamiento esperado:

La propiedad css debería ser reconocida en el momento de la compilación.

Información del entorno:

• versión de React: 17.0.1
• siguiente versión: 10.0.5
• Versión de @emotion/react: 11.1.5

Respuesta #1

Si utilizas el tiempo de ejecución automático, deberías poder solucionar el problema agregando lo siguiente a tu tsconfig.json.

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

Alternativamente, agrega lo siguiente a tu next-env.d.ts, lo cual añade soporte para la propiedad css de manera global para todos los componentes, cuando no se utiliza el runtime automático.

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

Consulta la documentación de TypeScript de Emotion para más detalles.

Respuesta #2

Aquí hay una configuración funcional con emotion y 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"
}