Reactjs 样式化组件-如何创建继承组件并能够向父级发送道具的样式？

例如（不是真实的，但工作方式相同），我有两个组件，其中一个（父级）具有样式并在其中一个中调用函数：

组件1

从'resolver'导入{callFunctionToResolve}；
从“样式化组件”导入样式化；
常量样式={
组件1：styled.div`
背景色：${（{backgroundColor}）=>callFunctionToResolve（backgroundColor}）；
颜色：${（{textColor}}）；
// ...
`
};
常量组件1=（{children，styles}）=>{
const{backgroundColor，textColor}=样式；
返回(
{儿童}
);
};

现在我有了我的组件2，它的css与组件1完全相同，但将

div

更改为其他内容，添加了

显示

属性，还将接收

样式

道具

从'Component1'导入{Component1}；
从“样式化组件”导入样式化；
常量样式={
组件2：已设置样式（组件1）`
显示：块；
字体大小：24px；
`
};
常量组件2=（{子项，样式}）=>(
{儿童}
);

问题是

Component1

没有收到

Component2

道具。最好的方法是什么

请注意，更多组件将继承自

Component1

链接到沙盒：

添加和删除

作为它覆盖的
道具

不能将
用作
和
样式化（组件）

const Component1 = ({ className, children, styles }) => {
  const { backgroundColor, textColor } = styles;

  return (
    <Styled.Component1
      className={className}
      backgroundColor={backgroundColor}
      textColor={textColor}
    >
      {children}
    </Styled.Component1>
  );
};

const Component2 = ({ children, styles, className }) => (
  <Styled.Component2 className={className} styles={styles}>
    {children}
  </Styled.Component2>
);

const Component1=（{className，children，styles}）=>{
const{backgroundColor，textColor}=样式；
返回(
{儿童}
);
};
常量组件2=（{子级，样式，类名}）=>(
{儿童}
);

我应该指定许多组件将从该组件继承。因此
Component3
和
Component4
也将调用
styled（Component1）
。我可能没有理解答案。只需检查链接，将
className
prop添加到
Component1
我已经添加了它，但似乎没有任何变化。我应该自己键入一个特定的
className
吗？不，只需在中重新创建问题，并尝试检查边框或其他可见样式。