styled-componetsのメディアクエリ共通化

styled-componentsのメディアクエリ共通化方法を探していましたが、どれも自分にはしっくりこなかったので自作しました。

styled-componentsのメディアクエリ共通化の選択肢（しっくりこなかったやつ）

• react-responsive
• styled-media-query

styled-componentsのメディアクエリ定数を自作

以下の記事を参考に定数を自作しました。

// src/styles/const/size
const mediaDeclaration = "@media screen and";
const breakPoint = {
  sm: 480,
  md: 768,
  lg: 1024,
};
export const mediaQuery = {
  xs: `${mediaDeclaration} (min-width: ${breakPoint.sm}px)`,
  sm: `${mediaDeclaration} (min-width: ${breakPoint.md}px)`,
  lg: `${mediaDeclaration} (min-width: ${breakPoint.lg}px)`,
};

// src/components/atoms/Button
import styled from "styled-components"
import { mediaQuery } from "../../styles/const/size"

//jsx省略

//style
const Button = styled.button`
  background-color: black;
  ${mediaQuery.lg} {
    background-color: blue;
  }
`;