React does not recognize the XX prop on a DOM element

Description React console error whenever passing props to a goober styled component: React does not recognize the XX prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase XX instead. If you accidentally passed it from a parent component, remove it from the DOM element.

When happening Passing through some props to a goober styled component (see codesandbox)

Possible solution? See transient props from styled-components

Codesandbox See the console logs https://codesandbox.io/s/vigorous-gates-0o2ge?file=/src/App.js

[cristianbote]

@devrnt published 2.0.20 with forwardProps 🥳 thank you so much for landing this! This was all your doing! So happy to see it in goober.

[jayalfredprufrock]

Landed here after using the cxs project which had similar goals but is no longer actively maintained. That library solved the problem by automatically stripping properties defined on propTypes (https://github.com/cxs-css/cxs/blob/eb934203a17e07aec63e971c3b87068e911b5b6e/src/component.js#L11) In combination with a babel transform that generates the propTypes from typescript typings, the developer experience was pretty darn good, with the obvious downside of having to ship propTypes in production.

Some might find the small increase in bundle size worth it to not have to prefix every style prop, especially when integrating with something like styled-system. I would also welcome the ability to pass off the burden to the developer via a shouldForwardProp function like what emotion exposes. Or perhaps a babel plugin could be used to generate an optimal black/white list of props so the library wouldn’t have to ship with an exhaustive list…idk just thinking out loud. I just know that I’ve seen the magical prefix approach pitched in numerous style libraries and it always seemed like more people were against it than for it…then again I could be biased on that front 😃 Either way, this library is looking like an attractive alternative to cxs and I plan on giving it a spin soon!