Filter props which are passed to underlying component

As written in the documentation non-html-standard props are filtered out. But this seems to be only the case for styled HTML-elements not for styled components. Which is okay if I style my own components and thus have control which props are getting passed along to the DOM. But if I do not, I will get an error. In my case, I have a wrapper for the react-bootstrap Component Panel, which should just serve as an example of a component that I do not ‘control’.

Environment

System:

• OS: Windows 10
• CPU: (8) x64 Intel® Core™ i7-3632QM CPU @ 2.20GHz
• Memory: 2.21 GB / 15.88 GB

Binaries:

• Node: 10.15.1 - C:\Program Files\nodejs\node.EXE
• npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

Reproduction

// ...
   import RbPanel from 'react-bootstrap/lib/Panel';
// .. .

const Panel = styled(RbPanel)`
        ${(props) => props.withBodyWrapper ? 'padding: 0' : 'padding: 15px'};
    `;
    
class Panel extends React.Component {
    return (
            <Panel withBodyWrapper={true}>
                TEST
            </Panel>
    );
}

Steps to reproduce

see code above

Expected Behavior

have some option to filter out props that I just want to pass to the styled component but not the underlying custom component (which I do not control)

Actual Behavior

props are passed along to the component and to the DOM which will throw a warning.

[lcswillems]

I have just written an RFC for filtering forwarded props: https://github.com/styled-components/styled-components/issues/2878

Would you like a solution like this?

TL;DR It consists of adding a second parameter for filtering props. The current solution:

const StyledDiv = styled(({height, width, ...props}) => <div {...props} />)`
    width: ${props => props.width}px;
    height: ${props => props.height}px;
`

is turned into:

const StyledDiv = styled.div(`
    width: ${props => props.width}px;
    height: ${props => props.height}px;
`, ({width, height, ...props}) => props);

This is easy to write and to understand, and props filtering (which is not the important part of the definition) is sent at the end of the definition.

[probablyup]

We won’t be iterating further on this API. My recommendation would be to use transient props if you want something for styling purposes but not to be passed on. https://styled-components.com/docs/api#transient-props