[小ネタ]styled-componentsをTypeScriptで利用する

概要

styled-componentsをTypeScriptで利用する場合の記載方法について。

シンプルな書き方

親が特定のreact componentでないときは、下記のようにシンプルに記述する。

const Button = styled.button<{primary: boolean}>`
  color: ${({primary}) => primary ? 'skyblue' };
`

複雑な場合の書き方

親のpropsを参照する場合は、Pickを使う。

interface Props {
  primary
  secondary
  // 略
}

function MyComponent(props: Props) {
  return (
    <div>
      <Button secondary={props.secondary} primary={props.primary}>{props.children}</Button>
    </div>
  )
}

const Button = styled.button<Pick<Props, 'primary' | 'secondary'>>`
  ${({primary, secondary}) => primary ? css`` : secondary ? css`` : css``}
`