What is the purpose of adding {...props} right before sx?

[dungle-scrubs]

Hi,

Reading through the docs I came across this syntax, but am not clear on why it exists. Also, if I exclude it, it still works fine.

import { jsx } from 'theme-ui'
export default props => (
  <div
    {...props} // What is this doing?
    sx={{
      // Various properties
    }}
  />
)

Thanks

[lachlanjc]

This syntax isn’t Theme UI-specific, it’s using a JavaScript “spread operator” to “forward” all props. That means if you’re passing children or DOM attributes or style props, they’ll be rendered on that styled div instead of ignored. It’s a common pattern with UI components (every one of Theme UI’s internal components uses it), so we don’t restrict what kinds of attributes you can use on those elements.

You can read more about its usage in React here: https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81#spread-attributes

& on the operator itself: https://www.joshwcomeau.com/operator-lookup?match=restspread

[dungle-scrubs]

Thanks! I understood spread already, but didn't know about the jsx syntax, which makes sense. Thanks for clearing that up.

[lachlanjc]

Awesome. Want to mark the answer on GitHub so it shows as answered? Thanks.

[maiertech]

Maybe a small thing to add is that in this example it's important that {...props} goes before the sx prop. Then you can't overwrite the sx prop and ruin the styling.