How to extend styled component without passing props to underlying DOM element?

Question

I have a styled component that is extending a third-party component:

import Resizable from 're-resizable'; ... const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend`     flex: 0 0 ${(props) => props.someProp}px; `;   const PaneContainer = ({ children, someProp }) => (     <StyledPaneContainer         someProp={someProp}     >         {children}     </StyledPaneContainer> );  export default PaneContainer; 

This resulted in the following error in the browser console:

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

So, I changed the prop to have a data-* attribute name:

import Resizable from 're-resizable'; ... const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend`     flex: 0 0 ${(props) => props['data-s']}px; `;   const PaneContainer = ({ children, someProp }) => (     <StyledPaneContainer         data-s={someProp}     >         {children}     </StyledPaneContainer> );  export default PaneContainer; 

This works, but I was wondering if there was a native way to use props in the styled component without them being passed down to the DOM element (?)

Answer 1

2020 UPDATE: Use transient props

With the release 5.1.0 you can use transient props. This way you do not need an extra wrapper i.e. unnecessary code is reduced:

Transient props are a new pattern to pass props that are explicitly consumed only by styled components and are not meant to be passed down to deeper component layers. Here's how you use them:

const Comp = styled.div`   color: ${props => props.$fg || 'black'}; `;  render(<Comp $fg="red">I'm red!</Comp>); 

Note the dollar sign ($) prefix on the prop; this marks it as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy.

The new answer should be:

styled component:

const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend`     flex: 0 0 ${(props) => props.$someProp}px; `; 

parent component:

const PaneContainer = ({ children, someProp }) => (     <StyledPaneContainer         $someProp={someProp}  // '$' signals the transient prop             >         {children}     </StyledPaneContainer> );