jsx() is not typed

[tavoyne]

Hello,

I'm trying to use jsx from @emotion/react in replacement for React.cloneElement, in order to be able to set a css prop for the cloned element:

👉 CodeSandbox link

As you can see, everything works fine, except that props are not typed, especially css and theme.

I can't find anything in the docs about that. Has anybody found a workaround?

Thanks 🙏

[srmagura]

From the React blog post on the new JSX transform:

The functions inside react/jsx-runtime and react/jsx-dev-runtime must only be used by the compiler transform. If you need to manually create elements in your code, you should keep using React.createElement. It will continue to work and is not going away.

I think this also applies to the jsx function from @emotion/react/jsx-runtime — it's not meant to be used directly in your source code.

Your use case is pretty interesting. Here are the ways I can think of to implement your use case without using jsx directly:

• <element.type {...element.props} {...props}>{children}</element.type> — See https://reactjs.org/docs/react-api.html#cloneelement
• Instead of passing in a JSX element to ButtonWrapperProps, pass in a render prop. It would be a function like (props: { className?: string }) => ReactElement
• Reorganize your components so that cloning elements is not necessary (not sure how feasible this is, depends on your application.)

But maybe there's a better way 🤷‍♀️.

[tavoyne]

Thanks for your answer.

I understand your point about the jsx function.

The <element.type> option seems to be a good alternative, though it suffers from the same problem: it's not typed. Unless there's a workaround I don't know?

I'm not a huge fan of render functions, plus everybody seems to be shifting away from that pattern.

And about reorganising my components, I'd love to do so but I couldn't find any viable alternative 😰

[srmagura]

Thanks @tavoyne, there does seem to be an issue with the types in this case, see #2690. Unfortunately, it's unlikely we will be able to fix this promptly. In the meantime, you could do:

css={(theme: MyTheme) => ({
    color: theme[color]
})

[Andarist]

If somebody would prepare a PR to make jsx typed mode accurately then we could consider reviewing it and possibly merging. But as @srmagura has said - it's not likely that we are going to work on this.

I suspect that you don't want to do this all over the place. So you could just create your little cssProp helper that would be correctly typed. Sure, it wouldn't be synchronized with Emotion's source code but the signature of jsx and semantics of css prop are stable and I don't expect that they change any time soon. Take a look here: https://codesandbox.io/s/elastic-orla-6q5utu