Rebass: Props shows up as attributes

[chiragjani]

Styled System Props ends up as attributes of DOM elements

is this an intended behaviour ?

even code sandbox link below has the same issue

<h1 font-size="4,5,6" font-weight="bold" class="sc-bdVaJa sc-htpNat sc-bxivhb cNddNq">Hello, Rebass</h1>

[jameswyse]

I'm also seeing this problem, it's causing react to log warnings too:

Warning: Invalid value for prop width on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior

[chiragjani]

I'm also seeing this problem, it's causing react to log warnings too:

Warning: Invalid value for prop width on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior

I think now that React doesn't complain as per docs I am not seeing those warnings, but still if those props are styled system props then they should be consumed rather than passed as attributes.

strangely enough CSS is generated properly.

[jxnblk]

See styled-components/styled-components#439

[chiragjani]

See styled-components/styled-components#439

Thanks @jxnblk that helped.

[ckeeney]

@jxnblk What is your recommended way of solving this? I understand the motivation of pushing the responsibility of cleaning props from DOM to a lower-level library, but all the workarounds I see would have to be implemented in Rebass, not my code. Is it possible to use rebass and not have props rendered to DOM right now?

[codepunkt]

@jxnblk Same here. How do we handle this?