styled-components: v4 passes through unknown HTML attribute to the DOM

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

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?

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

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

The top answer here solved it for me

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 notifications@github.com 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.

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

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.