【Styled-Components】CSS を上書きする [Techblog#54]

既存コンポーネントが以下のようにあったとします

import { styled } from 'styled-components'
const HorizontalLayout = styled.div`  display: flex;  justify-content: center;  align-items: center;`

これを縦並びにしたい場合は、既存コンポーネントを引数に指定することで CSS を上書きすることができます

const VerticalLayout = styled(HorizontalLayout)`  flex-direction: column;`

React コンポーネントの場合は、className を受け取れるようにすると上書きできます

import { styled } from 'styled-components'
const Button = styled.button`  background-color: red;`
type ButtonRedProps = {  className?: string}
const ButtonRed = ({ className }: ButtonProps) => (  const click = () => console.log('clicked')
  return <Button className={className} onClick={click}>Click me</Button>)

例えば、青いボタンにしたい場合は、同様に上書きできます 🎉

const ButtonBlue = styled(ButtonRed)`  background-color: blue;`