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;
`;