【React】styled-componentsにstyled-media-queryを適用する

導入

まず、前提としてstyled-componentsをインストールしていることとします。もししていない場合は、下記でインストールしましょう。

yarn

yarn add styled-components

npmを使うなら下記コマンドを実行して、インストールします。

npm

npm install styled-media-query

yarnを使うなら下記コマンドを実行します。

yarn

yarn add styled-media-query

これでインストールは完了です。

実装

実装は下記のようにできます。(公式より引用) styled-componentsで通常通り、backgroud-colorを黒で指定し、styled-media-queryで各画面サイズごとにスタイルをそれぞれ適用しています。

styled-media-query

import styled from "styled-components"; // You need this as well
import media from "styled-media-query";

const Box = styled.div`
  background: black;

  ${media.lessThan("medium")`
    /* screen width is less than 768px (medium) */
    background: red;
  `}

  ${media.between("medium", "large")`
    /* screen width is between 768px (medium) and 1170px (large) */
    background: green;
  `}

  ${media.greaterThan("large")`
    /* screen width is greater than 1170px (large) */
    background: blue;
  `}
`;

ちなみに、それぞれのブレイクポイントのデフォルトサイズは下記のように設定されています。
このサイズはカスタム可能です(方法については今回割愛)

size

{
  huge: '1440px',
  large: '1170px',
  medium: '768px',
  small: '450px',
}

lessThan

指定されたブレークポイントまたはサイズよりも小さい画面サイズのスタイルを追加できます。

lessThan

media.lessThan('medium')`
  /* styles ... */
`

greaterThan

このメソッドでは、指定されたブレークポイントまたはサイズより大きい画面サイズのスタイルを追加できます。

greaterThan

media.greaterThan('small')`
  /* styles ... */
`

between

このメソッドでは、指定された2つのブレークポイントまたはサイズの間に画面サイズのスタイルを追加できます。

between

media.between('small', 'medium')`
  /* styles ... */
`

参考