如何扩展Styled Component且不将props传递给底层DOM元素？

这个警告的根源很明确——你正在使用styled-components里已经被废弃移除的extend方法，这个方法在v4及以后的版本里已经不再被支持了。咱们直接来重构你的代码，彻底解决这个问题：

方案一：直接基于原始组件构建目标样式 #

如果ResizableSC本身没有额外样式，或者可以把它的样式合并到StyledPaneContainer里，直接这么写最简洁：

import Resizable from 're-resizable';
import styled from 'styled-components';

// 直接基于第三方的Resizable组件创建你的Styled组件
export const StyledPaneContainer = styled(Resizable)`
  flex: 0 0 ${(props) => props.someProp}px;
  // 如果原来的ResizableSC有自定义样式，直接加到这里就行
`;

const PaneContainer = ({ children, someProp }) => (
  <StyledPaneContainer someProp={someProp}>
    {children}
  </StyledPaneContainer>
);

export default PaneContainer;

方案二：复用基础样式（如果需要保留ResizableSC的样式） #

如果ResizableSC有需要复用的基础样式，用css辅助函数提取可复用的样式片段，再在多个组件里引用：

import Resizable from 're-resizable';
import styled, { css } from 'styled-components';

// 把ResizableSC的基础样式提取成可复用的片段
const resizableBaseStyles = css`
  // 这里放原来ResizableSC里的所有样式
`;

// 保留原来的ResizableSC（如果还有其他地方用到它）
const ResizableSC = styled(Resizable)`
  ${resizableBaseStyles}
`;

// 基于原始Resizable组件，合并基础样式和新样式
export const StyledPaneContainer = styled(Resizable)`
  ${resizableBaseStyles}
  flex: 0 0 ${(props) => props.someProp}px;
`;

// 或者，也可以直接基于ResizableSC来扩展（因为它本身就是一个Styled Component）
// export const StyledPaneContainer = styled(ResizableSC)`
//   flex: 0 0 ${(props) => props.someProp}px;
// `;

const PaneContainer = ({ children, someProp }) => (
  <StyledPaneContainer someProp={someProp}>
    {children}
  </StyledPaneContainer>
);

export default PaneContainer;

为什么原来的写法会报错？ #

在styled-components v4版本中，官方正式移除了extend方法，取而代之的是通过styled(已有的Styled组件)或者css函数复用样式的方式。旧的extend方式不仅会触发警告，后续版本还可能完全失效，所以建议尽快迁移到新的写法。

内容的提问来源于stack exchange，提问作者JoeTidee