posted: 2019/10/30

styled-componentsで複数のpropsを利用したい時にcss helperを使ったいい感じのやり方を考える

styled-componentsで、複数のpropsを扱いたいことがちょいちょいある。

const Item = styled.div`
  grid-row: ${({ row }) => row};
  grid-columns: ${ ({ col }) => col};
`

少量でも${({}) => ...}と無駄に記号が多くシンドい。
また、例えば変数を計算したい場合などはこれも面倒になる。

attrsなどもあるが、これもほぼ書き方としては同じような感じになる。

まとめて記法する

実は下記のような書き方も可能だったりする。これならだいぶ楽なハズだ。

const Item = styled.div`
  ${({ row, col }) => `
    grid-row: ${row};
    grid-columns: ${col};
  `}
`

ただし、これだとVS Codeで補完・highlightされないなど地味にしんどい

styled-componentsにはcssというヘルパー関数が存在する。

元来はmixinを処理するものだが、これを利用してみる

const Item = styled.div`
  ${({ row, col }) => css`
    grid-row: ${row};
    grid-columns: ${col};
  `}
`

分かりづらいがこんな具合でハイライトされる。

before

after