Prevent pass props from child to parent in styled components

Question

I am using styled components library with TypeScript. I have issue when I create styled component B that inherits from react component A . A is node_module (I cannot change behavior of A ). But A pass all props to div .

If B has any prop that A doesn't have, warning message shows in console, because div has no attribute isExpanded :

Warning: React does not recognize the isExpanded prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isexpanded instead. If you accidentally passed it from a parent component, remove it from the DOM element.

interface AProps {

}

interface BProps {
    isExpanded: boolean
}

const A = (props: AProps) => (
    <div {...props} />
) // Component A pass all props to <div>

const B = Styled(A)<BProps>`

` // I need isExpaned prop in component B and I would like to interit from A

Is there any way to prevent "bubble" props from child to parent in styled component?

Answer 1

There's no build-in solution for this in styled components, but you can wrap it into a function component and destructure the unwanted properties.

const B = Styled(({isExpanded, ...props})=><A {...props}/>)<BProps>`

You can also have a look at the github-issue about this topic: https://github.com/styled-components/styled-components/issues/135