Disable automatic passing down of props

Version

1.0.5

Steps to reproduce

    import { Link } from 'react-router'

    const ListElement = styled(Link)`

      ${props => props.active && activeListElement}
    `

Expected Behavior

Work without warnings

Actual Behavior

Is it possible to disable the automatic pass down of props so we don’t have that warning anymore?

Thanks!

[vdanchenkov]

Do you mean some props selectively? I’d suggest:

const ListElement = styled(({ active, ...rest }) => <Link {...rest} />)`

[alansouzati]

I’m facing this problem too. I don’t think const ListElement = styled(({ active, ...rest }) => <Link {...rest} />) is bullet proof solution. Here is where it is failing for me:

1) Callers can pass as prop and now the component suddenly breaks. for example:

<ListElement as="span" />

One would expect that it would render a Link as a span tag, but it gets rid of the Link altogether. Don’t get me wrong, this is the expected behavior in styled-components, but it makes it difficult customize things. I had to introduce a tagName prop just for that. And I keep getting the question why you need “tagName” since styled-components has “as” prop?

2) Hard, if not impossible to extend styles.

I have a Box component with some styles. This Box has a color prop that I need to exclude (otherwise it will bleed). Now I want a Flex component that augments this Box with flexbox capabilities. This Flex has a direction prop that I need to exclude. For example:

const Box = styled(({ color, ...rest}) => <div {...rest} />)`
  color: ${props => props.color};
`;

const Flex = styled(Box)`
  flex-direction: ${props => props.direction};
`;

Now if you inspect the DOM Box color does not bleed, but Flex direction does. I’m failing to identify how to properly extend these styles.

3) Having to deal with forwardRef and increasing the React DOM Tree.

Since I’m adding ({ active, ...rest }) => <Link {...rest} /> forward refs don’t work anymore. Meaning <ListElement ref={React.createRef()} />the ref will be the React element instead of the actual DOM, forcing me to use a deprecated findDOMNode API. Or wire the forwardRef which increases the React Depth Tree (which brings performance issues in React dev env)

I feel that everything would be much easier if styled-component allowed an API to exclude props to bleed to the DOM:

const Box = styled("div", { excludeProps: ['color'] })`
  color: ${props => props.color};
`;

const Flex = styled(Box, { excludeProps: ['direction'] })`
  flex-direction: ${props => props.direction};
`;