rebassjs / space Goto Github PK

I consider two options for spacing:

1. Box component
2. Space component

In case of this code snippet(n items):

items.map((text) => (
<Space/Box>
  <CustomComponent>
    {text}
  </CustomComponent>
</Space/Box>
))

What solution would be more performan in case of large n.
Box component will create n extra divs.
Space component will clone the element n times.
Any thought on this?

Hi there, after on convo on twitter I tried to get this to work where the parents sets default spacing, and children can override it. I wasn't able to increase the specificity of the children in StyledChildren, because in my case the children were styled components, and didn't have a className prop yet because they had not rendered. Wondering if you have any suggestions how to solve this?

Here is a codesandbox

Happy to make a PR if you have any suggestions. I do prefer this approach to my former css-based approach, but so far it has the same precedence issue.

Thanks again!

If the child of the <Space> component is another component instead of html, the spacing is not applied.

Demo: https://codesandbox.io/s/vv3vq2wkk5