Extending Components with Adative Props about grid HOT 2 CLOSED

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.

from grid.

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

from grid.