🐶
blog.terrier.dev

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されないなど地味にしんどい

CSS helperを利用する。

styled-componentsにはcssというヘルパー関数が存在する。
元来はmixinを処理するものだが、これを利用してみる
const Item = styled.div`
  ${({ row, col }) => css`
    grid-row: ${row};
    grid-columns: ${col};
  `}
`
分かりづらいがこんな具合でハイライトされる。
before
before
after
after

Edit on Github
@terrierscript