在样式化组件中，组件组合的正确方式是什么

Question

我很难决定什么是最佳实践方法，也找不到这个常见用例的正确答案。

堆栈：React，样式化组件，Typescript

我已经构建了一个组件，它有5种不同的颜色预设(悬停、活动等(

我添加了一个预设道具：

<Button preset="primary">

问题是，我应该只将这个组件与这个道具一起使用，还是应该为每个预设创建一个组件：

const PrimaryButton = styled(Button).attr(() => {preset: "primary"})

并导出每个组件？

谢谢！

Answer 1

您应该使用带有prop的组件，因为它将有助于优化您的代码。代码的可重用性也将以这种方式得到保证，因为这是react的主要好处之一。