スタイル付きコンポーネント：補間された関数または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> 
); 

補間機能も使用できました。どのように2つの間で決めるのですか？

Answer 1

それは別の状況で使うことができますが、それを使用すると、継承のような新しいコンポーネントの余分なスタイルとして使用します。例：navメニューの場合、アクティブなメニューがある場合は、extendを使う必要はありません。ちょうどprops.Soを使用してアクティブなクラスを使用して拡張や新しいコンポーネントを行う必要はありません。