title: How to extend styled component without passing props to underlying DOM element?
body: <p>I have a styled component that is extending a third-party component:</p>
  
  <pre><code>import Resizable from 're-resizable';
  ...
  const ResizableSC = styled(Resizable)``;
  export const StyledPaneContainer = ResizableSC.extend`
      flex: 0 0 ${(props) =&gt; props.someProp}px;
  `;
  
  
  const PaneContainer = ({ children, someProp }) =&gt; (
      &lt;StyledPaneContainer
          someProp={someProp}
      &gt;
          {children}
      &lt;/StyledPaneContainer&gt;
  );
  
  export default PaneContainer;
  </code></pre>
  
  <p>This resulted in the following error in the browser console:</p>
  
  <blockquote>
    <p>Warning: React does not recognize the <code>someProp</code> prop on a DOM
    element. If you intentionally want it to appear in the DOM as a custom
    attribute, spell it as lowercase <code>someProp</code> instead. If you
    accidentally passed it from a parent component, remove it from the DOM
    element</p>
  </blockquote>
  
  <p>So, I changed the prop to have a <code>data-*</code> attribute name:</p>
  
  <pre><code>import Resizable from 're-resizable';
  ...
  const ResizableSC = styled(Resizable)``;
  export const StyledPaneContainer = ResizableSC.extend`
      flex: 0 0 ${(props) =&gt; props['data-s']}px;
  `;
  
  
  const PaneContainer = ({ children, someProp }) =&gt; (
      &lt;StyledPaneContainer
          data-s={someProp}
      &gt;
          {children}
      &lt;/StyledPaneContainer&gt;
  );
  
  export default PaneContainer;
  </code></pre>
  
  <p>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 (?)</p>