styledに対して既存の Styled なコンポーネントを渡すと、その要素のスタイルに加えて当たらなスタイルを当てた新しい要素を作れます。渡す時は関数の引数として渡します。
const BaseElement = styled.div`
font-size: 14px;
`;
const ColorOrangeElement = styled(BaseElement)`
color: orange;
`;上記のColorOrangeElementは、
タグは
<div>スタイルは
font-size: 14px; color: orange;
な要素になっています。
もし<div>タグも変えたい場合は Styled なコンポーネントが持つwithComponentメソッドで変えることができます。例えば以下のようにすると<span>に変更できます。
const ColorOrangeElement = styled(
BaseElement.withComponent('span')
)`
color: orange;
`;
