TS: Property 'sx' does not exist on type 'SVGProps<SVGRectElement>'

Describe the bug

I get a TypeScript error when I try to use the sx prop on an SVG element claiming that Property 'sx' does not exist on type 'SVGProps<SVGRectElement>', yet it works just fine anyway.

To Reproduce

/** @jsx jsx */

import React from 'react';
import { jsx } from 'theme-ui';

const Foo = () => <rect sx={{ fill: 'papayawhip' }} />

Expected behavior I expect sx to be a valid prop on SVG elements or for sx to fail on SVG elements. (Would much rather the former since it works anyway 🙂.)

Screenshots N/A

Additional context N/A

[hasparus]

Here’s a CodeSandbox demo https://codesandbox.io/s/theme-ui-rect-fg6g0.

Theme UI 0.3.1 is written fully in JavaScript. You can notice that types appear on hover in the demo, because @types/theme-ui is installed automatically by the IDE.

When you’re using TypeScript, you need to install @types libs yourself.

Does installing @types/theme-ui solve the problem? If not, I’d like to help figure it out.

[hasparus]

Okay, this is a bit weird. I doublechecked in DefinitelyTyped, and the way both versions register sx prop is exactly the same.

I just installed 0.4.0-rc.1 and the problem seems to have gone away.

There are still some rough edges regarding TypeScript in 0.4.0-rc.1. Feel free to ping me here if you encounter any problems.