theme ui with Typescript

[igotfr]

Type '{ children: Element[]; sx: { backgroundColor: string; borderRadius: number; fontSize: number; margin: number; padding: number; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.

Property 'sx' does not exist on type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.ts(2322)

how to solve this?

[jorisw]

ThemeUI expects you to exclusively use ThemeUI components, at least when you're passing the sx prop.

So replace your <div /> with a Flex or Box component.

[igotfr]

the problem occurs exclusively with .tsx, on .js files works normally

[jorisw]

That's because... only ts and tsx files are treated as TypeScript and therefore typechecked.

[igotfr]

is not there a way to use common html tags with sx and Typescript?

[hasparus]

ThemeUI expects you to exclusively use ThemeUI components, at least when you're passing the sx prop.

We're adding sx to global JSX types, so you can use it with JSX pragma with any "HTML tag".

Take a look here: https://github.com/system-ui/theme-ui/blob/master/packages/core/src/react-jsx.ts

@cindRoberta which version of Theme UI are you using?

[igotfr]

0.3.1

[hasparus]

It should Just Work(TM). Here's a CodeSandbox.

https://codesandbox.io/s/vibrant-goldwasser-cfenj?file=/src/App.tsx

I'll try to help you out, but I think we need more details.

[igotfr]

solution: npm i -D @types/theme-ui