The css
prop is not recognized at build time. I'm unsure if this is due to misconfiguration of the project, or if this represents a known bug.
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<...> & { ...; }'
To reproduce:
https://github.com/jbcurrie/jbcurrie.github.io/tree/next
NavMenu.tsx
Expected behavior:
The css
prop should be recognized at build time.
Environment information:
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
If using the automatic runtime, you should be able to fix the issue by adding the following to your tsconfig.json
.
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}
Alternatively, add the following to your next-env.d.ts
, which adds support for the css
prop globally for all components, when not using the automatic runtime.
/// <reference types="@emotion/react/types/css-prop" />
Check Emotion's TypeScript documentation for more details.
Here is a working config with emotion and 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"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With