Passing props to custom element like Link

[yudyananda]

Hi, i wonder how to passing props to custom component properly. In my case is Link component from gatsby

// style.js

import { Link } from 'gatsby'

const MyLink = styled(Link)`
  ${({ fooBar }) => (fooBar ? tw`inline-flex` : tw`block`)}
`;

//Component.js
<MyLink to="/" fooBar={fooBar}> 
   {baz}
</MyLink>

then the console show the following error

react-dom.development.js:67 Warning: React does not recognize the `fooBar` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fooBar` instead. 
If you accidentally passed it from a parent component, remove it from the DOM element.

[ben-rogerson]

I use emotion's shouldForwardProp to make sure the prop doesn't get passed down to the element, making sure it's only used for styling.

[yudyananda]

awesome, thanks ben