emotion でメディアクエリを設定し、使い回す

emotionでメディアクエリを設定する例は以下のように紹介されています。

import { css } from '@emotion/react'

render(
  <p
    css={css`
      font-size: 30px;
      @media (min-width: 420px) {
        font-size: 50px;
      }
    `}
  >
    Some text!
  </p>
)

https://emotion.sh/docs/media-queries

この記事では、上記のようにメディアクエリをベタで書かずに、設定を使い回す手順を紹介します。

utils/mq.ts を作成

以下のように、メディアクエリ用の変数を作成します。

export enum Devices {
  Smartphone = 'smartphone',
  PC = 'pc',
}

export const mq = {
  [Devices.Smartphone]: '@media (min-width: 768px)',
  [Devices.PC]: '@media (min-width: 1200px)',
};

メディアクエリを使い回す

以下のように、 mq 変数を使ってメディアクエリを設定できます。
Devices.Smartphone のように、enumを定義した方が、どの幅のメディアクエリを設定しているのかがわかりやすくなって使いやすいと思います。

const styles = {
  container: css`
    position: relative;
    display: flex;
    flex-direction: column;
    width: 342px;
    height: 384px;
    border-radius: 16px;
    border: 1px solid #d5cab3;
    overflow: hidden;

    ${mq[Devices.Smartphone]} {
      flex-direction: row;
      width: 648px;
      height: 182px;
    },
  `,
}