Order of properties (eg. m & my) is not respected when using styled-components' .attrs

Describe the bug

• I’m importing box from theme-ui.
• When I’m extending Box (from theme-ui) to create an atomic component, eg. a Button, I want to set default props. I use styled components .attrs to do that.
• attrs overrides what’s inlined in the instantiated component.

To Reproduce https://codesandbox.io/s/fast-frost-j2quo?file=/src/App.js

Expected behavior

• In the example above I’d expect the vertical margin to be 100. Instead, it is 20.

[hasparus]

Theme UI uses Emotion internally, and using it with styled-components is highly not recommended. I’d use styled-system instead of Theme UI in existing styled-components codebases.

1. You don’t want two big CSS-in-JS libs in your bundle.
2. I’d recommend to use @emotion/styled instead of styled-components (@theme-ui/components uses @emotion/styled, so you already have it)
3. But @emotion/styled doesn’t support attrs. It’s advised to use normal components to assign default values instead. See https://github.com/emotion-js/emotion/pull/617#issuecomment-388284739 and atanasster’s CodeSandbox.

I guess is not directly caused by theme-ui. But Theme-UI’s usage is affected by it as exemplified by the codsandobx.

Take a look at the div rendered by your Box.

Three classes! And two style tags in our head, one from styled-components, and one created by @emotion/core.

And in the className built by Emotion, we can see that margin is added last. After removing attrs, and rewriting your code to use only Theme UI, we can control where the margin appears. With attrs? Well, that’s hard. We’d have to dive into attrs implementation.

However, this can’t be fixed on @theme-ui/components side. One could assume that my is always more important than m, but it’d be a huge breaking change, and discrepancy with how CSS works.

[atanasster]

Maybe I am missing something - cant you just use regular props instead of styled.attrs? This is if the style props are extended as component props as in the case of BoxProps m, my etc. If the styles are not extended, you can just use sx prop on the instantiating side <Boxy sx={{ bg: "white", mx: 50 }} />.

https://codesandbox.io/s/epic-ritchie-uy5tq?file=/src/App.js