v4 passes through unknown HTML attribute to the DOM

[shiningjason]

Environment

npm packages:

1. react: v16.5.2
2. react-dom: v16.5.2
3. styled-components: v4.0.2

Reproduction

https://codesandbox.io/s/zn5vrk0vpm

Expected Behavior

https://codesandbox.io/s/20xlp242pr
There is no unknown-prop warning if I'm using styled(styled.button).attrs({ customProp }) with styled-components v3.4.10.

Actual Behavior

There is unknown-prop warning with styled-components v4.

If this is not a bug, and there is something missing. Please let me know, thanks!

[Fer0x]

Don't think that it is expected behavior.

Also example from docs https://www.styled-components.com/docs/basics#attaching-additional-props works in similar way:

[mxstbr]

This is definitely a bug, any ideas why this broke @probablyup?

[Fer0x]

@shiningjason @mxstbr

What's interesting is that styled-components@3.x works much the same but instead of camelCase props are inserted in lowercase and React doesn't warn about this.

[mxstbr]

Oh, that's even more strange 🤔

[Fer0x]

Fixed in #2133
However, pay attention to #2093. It will add new way to tell which attributes should pass as html attributes

[mbrowne]

I'm seeing a similar issue with the new as prop, e.g.:

...
import { Link } from 'react-router-dom';

const StyledLink = styled.a`
    ${p => (p.linkStyle === 'upperCase' ? 'text-transform: uppercase' : '')}
`

<StyledLink as={Link} linkStyle="upperCase" to="/">test link</StyledLink>

Warning: React does not recognize the linkStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase linkstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Is this related to an existing issue or should I open a new issue?

[quantizor]

@mbrowne Since Link is a custom component, we don't do prop filtering and pass all props through to it. Until we settle on one of the several prop handling proposals floating around for v5 I don't think we're going to have a good solution for this.

[byzyk]

Is there any ETA on when this can be addressed? Or let me know if I can help with the PR and what the challenge is.

[byzyk]

As a workaround for eliminating React warnings in custom components, I had to make use of data-* attributes.

[jarodtaylor]

Will this be resolved in v5 for the Link (or any other custom components)?

[TerrorOnMtHyjal]

Any update on this now that v5 beta is out? I'm attempting to use Formik's Field component with styled-components and want to customize the css if an error is present or not.

[srikanthbhamidipalli]

Still I'm getting error.. 😢

[GuilleDF]

Seeing as this still happens in v5 for custom components, can we reopen this issue? Or create a new one?

[quantizor]

This isn’t a bug, we explicitly do not filter props for custom components because we don’t know if the component needs to consume the prop as well.

…

Sent from my iPhone

On Jan 15, 2020, at 5:59 AM, GuilleDF ***@***.***> wrote:  Seeing as this still happens in v5 for custom components, can we reopen this issue? Or create a new one? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ItsMrAkhil]

@probablyup @mxstbr Why can't we filter properties based on some prefix like $, like below?

<StyledComp $someStyleProp={someValue} />

The $someStyleProp will not be passed down as the user explicitly wants to ignore the property being passed down?

[quantizor]

I proposed this a while ago actually. We could, but if another library decides to do the same it’d be a mess basically.

…

On Mon, Feb 3, 2020 at 4:26 AM Akhil Pentamsetti ***@***.***> wrote: @probablyup <https://github.com/probablyup> @mxstbr <https://github.com/mxstbr> Why can't we filter properties based on some prefix like $, like below? <StyledComp $someStyleProp={someValue} /> The $someStyleProp will not be passed down as the user explicitly wants to ignore the property being passed down? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2131?email_source=notifications&email_token=AAELFVWYG3NO43GUTLD7JMDRA7PODA5CNFSM4F6GZO5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKTDLNQ#issuecomment-581318070>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELFVW7BXTHUHXBLZLRTU3RA7PODANCNFSM4F6GZO5A> .

[Maushundb]

The top answer here solved it for me