Reactjs 如何键入扩展样式的组件？

Typescript@2.8.1，样式化-components@2.4.0

我需要有一个基本样式的组件，它将被

.extend（）

编辑以创建新的类似组件，以避免代码重复

我提出了以下不会引发任何错误的代码：

export interface Aprops {
  icon?: string;
}

export const A = styled<Aprops, 'div'>('div')`
  padding: ${(props) => (props.icon ? '10px' : '4px')};
`;

export interface Bprops {
  darkBackground?: boolean;
}

export const B = A.extend`
  background-color: ${(props: Bprops) =>
    props.darkBackground ? 'grey' : 'white'};
`;

function test() {
  return (
    <React.Fragment>
      <A icon="str1" />
      <B icon="str2" darkBackground />
    </React.Fragment>
  );
}

导出接口Aprops{
图标？：字符串；
}
导出常量A=styled（'div'）`
填充：${（props）=>（props.icon？'10px'：'4px'）；
`;
导出接口Bprops{
黑色背景？：布尔值；
}
导出常量B=A`
背景色：${（道具：Bprops）=>
道具。黑色背景？“灰色”：“白色”}；
`;
功能测试（）{
返回(
);
}

是否有方法重写行

export const B=a.extend

，使用此级别上指定的

Bprops

属性，如这里所示：

export const a=styled（'div'）

？

---

像导出常量B=styled（A），所以我不需要在我需要的任何地方复制这个代码

（props:Bprops）

，在组件

B

的声明中似乎我找到了解决方案：

export const B = styled<Aprops & Bprops>(A)`
  background-color: ${props =>
    props.darkBackground ? 'grey' : 'white'};
`;

export const B=styled（A）`
背景色：${props=>
道具。黑色背景？“灰色”：“白色”}；
`;