Theme-UI's sx prop vs styled-system's API/style props

[sheedy]

Hey everyone, huge fan of Styled-System and Theme-UI here.

I'm working on a design system with Theme-UI as the base instead of Styled System on the basis of this quote "The next evolution of Styled System - if this not accurate, someone please set me straight 😄.

I have three closely related questions about style/sx props:

1. Is Theme-UI's sx prop intended to replace Styled-System's more expansive style props?
2. Why are sx's margin and padding props also available as their own individual props on components?
3. What can Styled-System do that Theme-UI can't (and therefore need to be used in addition to Theme-UI)?

---

As far as I can tell, Theme-UI mixes the terms API and props and has:

• A low-level API
• A limited set of style props/API for components
• The sx prop for anything not covered by the former.

Styled-System has:

• An API or "style props"

[hasparus]

I'm not sure if it will answer your questions, but you might like it: https://jxnblk.com/blog/two-steps-forward/

[sheedy]

Thanks @hasparus. I had read that (and literally everything else @jxnblk has written) a couple of weeks ago but just started using it now and forgot about it.

It answers question 1. 2 isn't overly important but still curious. Would love to know the answer to question 3 though as it has the potential to trip me up.

[hasparus]

With regards to (3) I'm using both styled-system and Theme UI (in different projects) and I'm not sure if there's anything missing in Theme UI. The API differs, but the capabilities should be more or less the same.

[jxnblk]

I think this might answer some of #3 https://theme-ui.com/guides/motivation -- i.e. Theme UI is intended to be more "batteries-included" whereas Styled System can be used in various ways and isn't coupled to React or a particular CSS-in-JS library. As for question #2, why not? It's only there as a convenience, but I'm not sold on the idea that the margin/padding props need to be in there

[sheedy]

Thanks @jxnblk! Want to make sure I'm using the one will get the most attention from the maintainers. I'm using React and not tied to any particular CSS-in-JS library.
I quite like Styled-System's more expansive props so I'll re-phrase question 2 – why are margin and padding available as their own props but not all the others (from Styled-System)?