Extending Components with Adative Props

[djstein]

If one tries to use Styled Components feature of Adaptive Props on an extended grid-styled component, React will not be able to determine the prop. The desired effect of the Styled Component's CSS will still be applied however.

Unknown prop `<$primary>` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Base)
    in Base (created by Box)
    in Box (created by Flex)

Example:

export default CustomFlex = styled(Flex)`
	color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

render(<CustomFlex primary />);

If this example is not clear I can make additions, or if I simply am not writing the additional prop correct, please inform! I believe this issue may be common for others.

[djstein]

To update on this, this is a general styled components issue mentioned in these two issues:
styled-components/styled-components#305
styled-components/styled-components#439

Issue 305 has some examples for how to get around this. Here is an expanded example for anyone looking at this. This will get around the errors that React throws based on not knowing props as mentioned in both of these issues.

function backgroundImage(displayImage) {
  return displayImage ? `url(${background})` : 'none';
}

const NavBar = styled(({ background, children, ...props }) => (
  <Flex {...props}>{children}</Flex>
))`
    background-image: ${props => backgroundImage(props.background)};
`;

If there is a better implementation, which there appears to be based on the abstraction of the components in grid-styled I (and I'm sure others) would love to know how to use it. Unfortunately it is a little hard to follow. Until then, we wait on the updated styled-components to fix this issue.

[jxnblk]

Closing this since it seems like an issue related to styled-components