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:
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.