v4 passes through unknown HTML attribute to the DOM

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!

[jarodtaylor]

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

[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?