css - Styled-components:插值函数或 component.extend？

Question

在 styled-component 中，您如何决定是应该使用插值函数来修改组件(通过传递 props )还是扩展现有组件。例如:

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 我们可以在其他情况下使用它，但是如果使用 extends 我们只是将它用作新组件的额外样式，例如继承。示例:对于导航菜单，如果有事件菜单，则不需要使用扩展。只需使用 props 的事件类即可。因此您无需扩展或制作新组件。