💅
styled-componentのスタイル拡張ができないとき
スタイル拡張楽しいぜええええええええええ！！！となっていたときに、全く拡張されていないことに焦った話
styled-componentsとは
CSSinJSの便利なやつ（割愛）
2種類のスタイル拡張
styled-componentsでは、コンポーネントを継承してスタイルを拡張することができます。
例：
const StyledComponent = styled.div`
color: tomato;
`
このstyled-componentをこんなふうに拡張できます。
const ExStyledComponent = styled(StyledComponent)`
background-color: lime;
`
これを多用するのがstyled-componentsの流儀（適当）なのですが、この継承は、
- styled-componentsを継承するとき
- 普通のReactのコンポーネントを継承するとき
の2パターンあります。
1つ目の場合は、上記の例で問題ありませんが、2つ目の場合はコンポーネントにちょっとした細工をする必要があります。
const Button = ({className}) => {
return <button className={className}>ボタン<button>
}
styled-componentsではclassNameを使ってスタイルを継承させるので,このようにclassNameプロパティがないと反映されないのである.
これで,
const StyledButton = styled(Button)`
background-color: lime;
`
とかすればスタイルを拡張（追加）することができる！
これであなたもstyled-componentsマスターだ！
【参考文献・参考記事など】
Discussion