Using SC's attrs passes down non-DOM props

Question

Using SC's attrs passes down non-DOM props

aaronmcadam opened this issue 7 years ago · 7 comments

Hi there, thanks for a great library!

With styled-components v2, there's a new attrs API that simplifies wrapping third-party components.

However, wrapping one of react-styled-flexboxgrid's components, for example Col, raises:

Warning: Unknown prop `theme` on <div> tag. Remove this prop from the element

Here's the gist: https://gist.github.com/aaronmcadam/52b5d1f93d472ce5f33738c8f52b76ed

Answer 1 · 2017-04-18T16:31:32.000Z

If we replace this sort of logic with styled.div, it might work.

If we need to use another tag name, we can call .extendWith('section')() on it

Answer 2 · 2017-05-08T17:41:05.000Z

Hi

Thanks to point me the .attrs() method. It looks powerful.
But at this time the v2 is not yet stable. We could maintain a side branch, like next. Are you interested to make a PR for support v2 ?

Answer 3 · 2017-05-08T17:45:56.000Z

It's at RC now, so it's nearly ready. I could try a PR but just using attrs won't fix this I think. I think extend or extendWith is what we should be using

Answer 4 · 2017-05-26T09:11:44.000Z

v2 has been officially released. Did you have any ideas on how we might fix this issue @LoicMahieu?

Answer 5 · 2017-06-01T09:13:15.000Z

Houra! 🎉

I suppose that if we just remove the support for tagName prop, we could simply use a styled.div and... done ?

Answer 6 · 2017-06-01T09:15:32.000Z

That would be the fastest fix and then we could look at supporting custom tags later, maybe using the withComponent method.

Answer 7 · 2017-06-01T12:08:52.000Z

Thanks for sorting this! ❤️