posted: 2018/04/08

styled-componentsでmedia queryを使う

styled-components使うならレスポンシブ対応は@media queryに任せたい。
本家にはmedia templatesという章で記載されている
https://www.styled-components.com/docs/advanced#media-templates
ただこれ若干いちいち用意するのがめんどくさいのと、地味にTypescriptなどに優しくない記述になっている。
ということで、styled-media-queryというパッケージに頼っちゃうと良い
lessThan, greaterThanとかで管理。サイズはデフォルト値があるがカスタマイズも可能。
ざっくり作るだけでいいならこれで十分そう
const Logo = styled(Link)`
  font-size: 20px;
  ${media.lessThan("small")`
    font-size: 18px;
  `};
`;
Edit on Github