Box component and its boxSystemProps

[vitorleonel]

Hey,

I noticed that now a days we have a list of valid properties inside the Box component and before we use the rest variable to spread the properties to the Component we have a foreach removing the invalid ones.

Does anybody knows if we have a way or a pattern to use custom properties in this case?

https://github.com/system-ui/theme-ui/blob/develop/packages/components/src/Box.tsx

Thank you in advance.

[lachlanjc]

Could you be more specific about "custom properties"? Do you mean creating your own components wrapping Box with React props, or CSS custom properties?

[vitorleonel]

I mean, how can I use properties like "data-analytics-id"? I saw that we have a fixed list allowing only the properties inside that list.

[lachlanjc]

All props you pass except BoxOwnProps will be rendered in your HTML, so you can pass data-*, aria-* etc as usual & they should work normally!