TS reports sx prop as an error on basic HTML elements

Describe the bug

Whenever I use the sx prop with a basic HTML element (e.g., <div>), TS reports it as an error: Property 'sx' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

Stranger still, IntelliSense seems to pick up the correct definitions from @types/theme-ui:

This behavior only occurs with basic HTML elements. Using the sx prop on React components is fine.

To Reproduce

I’m not sure how to reproduce the problem, it’s always been an issue for my project. I’ve chosen to ignore it because I use Babel for TS compilation which strips out all types, so it’s not a blocker. However, it’s highly annoying.

Expected behavior

Using the sx prop with an HTML element just works.

Screenshots

See above.

Additional context

I do have @types/theme-ui installed, so this shouldn’t be a problem.

[atanasster]

Thanks a lot, yes pls create a new issue (and if you fel like it, maybe a PR, or we could work both on it?) - the sx prop with your theme types - not sure how we can make that in a compatible way - but we can discuss it in the new issue.

The current one I still think unless we can get a repro should close, just too much backlog noise

[ersinakinci]

Yes, exactly, something like that. There would also need to be some way to hook up MyTheme to sx, etc.

I’m personally OK with closing the current issue, but it appears that others are facing it, too. I’ll create a new issue for the generics.