样式组件：插值函数或component.extend？

Question

在样式组件中，您如何决定是否应使用插值函数来修改组件（通过传递道具）或扩展现有组件。例如：

const Button = styled.button`
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`;

// We're extending Button with some extra styles
const TomatoButton = Button.extend`
    color: tomato;
    border-color: tomato;
`;

render(
    <div>
        <Button>Normal Button</Button>
        <TomatoButton>Tomato Button</TomatoButton>
    </div>
);

我们也可以使用插值函数。你如何决定两者之间？

Answer 1

不同的是，通过传递道具我们可以在其他情况下使用它但是如果使用扩展我们只是将它用作新组件的额外样式，如继承。示例：对于导航菜单，如果有活动菜单，则不需要使用扩展。只需使用props使用活动类。因此，您不需要扩展或创建新组件。