search

rebassjs / rebass

:atom_symbol: React primitive UI components built with styled-system.
https://rebassjs.org
MIT License
7.95k stars 659 forks source link

Type safety when using the sx prop + styled components theme #980

Open dimosmera opened 4 years ago

dimosmera commented 4 years ago

Hi,

Is there any way to get autocompletion and type safety when using the sx prop? I am using Rebass with TypeScript and styled-components.

My styled-components theme is fully typed (https://styled-components.com/docs/api#typescript) but I wasn't able to achieve the same results when inlining styles with the sx prop.

Am I missing something obvious?

mrlubos commented 4 years ago

I think I have the same question. When using a component like this

<Box
  bg="foo.bar"
/>

Is there a way to verify that foo.bar is a valid value in my theme object? Or should I be using a different syntax when looking to catch these issues in TypeScript? Thanks!