Javascript 将道具从父包装器传递到子包装器

我需要将道具从包装器传递到子组件

有这样一个结构：

CabinetBlockContainer.jsx

smallChild.jsx

现在，我的smallChild.jsx看起来像：

return (
    <CabinetBlockContainer>
      <div className={props.className}>
        <Typography variant="h6" color="primary">
          {props.title}
        </Typography>
        <Typography variant="caption">{props.subtitle}</Typography>
      </div>
      <BalanceSmallBlock balance="1254.51" needIcon={props.needIcon} />
    </CabinetBlockContainer>
  );

返回(
{props.title}
{props.subtitle}
);

我的容器看起来像：

 return (
    <div className={props.className}>
      <div className="block-wrapper" >

      </div>
    </div>
  );
})

返回(
);
})

我的块有很多样式，这就是为什么我创建了包装器（CabinetBlockContainer）。我需要将道具从我的CabinetBlockContainer传递到它的子组件。我真的不知道这是最好的做法，但似乎很正常

---

我曾试图在文档中找到如何传递这样的道具，但有任何解决方案

在包装器中使用

{props.children}

似乎您想要执行类似的操作。

您可以在使用新的道具克隆子对象时将道具传递给子对象

为了更好地理解道具和状态是如何工作的，请参考

---

这里有一个关于

谢谢的问题的例子，这就是我一直在寻找的东西。非常感谢。找到其他解决方案export const CabinetBlockContainer=styled.div``哪种变体更好？