样式化的组件：样式化的自定义组件，带有一些道具

Question

我有一个<Header />组件，它需要一个size道具。我想使用一个size道具作为标题，并另外使用styled-components对其进行样式设置。

类似以下内容，但这显然行不通。

const MyHeader = styled(<Header size="huge />)`
  margin-top: 2rem;
`

任何想法如何实现这一目标？

Answer 1

您可以这样做：

const MyHeader = styled(Header)({ ... });

例如：

const MyHeader = styled(Header)`
  color: red;
`

或者，如果您想要：

const Temp = () => <Header size="huge" />;
const MyHeader = styled(Header)({ ... });