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

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)({ ... });

styled-components: styled custom component, with some props