posted: 2018/04/08

styled-componentsでmedia queryを使う

styled-components使うならレスポンシブ対応は@media queryに任せたい。
本家にはmedia templatesという章で記載されている

ただこれ若干いちいち用意するのがめんどくさいのと、地味にTypescriptなどに優しくない記述になっている。

ということで、styled-media-queryというパッケージに頼っちゃうと良い

lessThan, greaterThanとかで管理。サイズはデフォルト値があるがカスタマイズも可能。
ざっくり作るだけでいいならこれで十分そう

const Logo = styled(Link)`
  font-size: 20px;
  ${media.lessThan("small")`
    font-size: 18px;
  `};
`;