styled-componentsのthemeを使ってメディアクエリを楽にかく方法

styled-components で メディアクエリを楽にかく方法

styled-components を使っている人は,皆どのようにレスポンシブ書いているのか今日このごろ.
僕はこんな感じでかいてます.

theme と css を使う

theme.jsを作成

import 'styled-components';
import { css } from 'styled-components';

export const theme = {
  colors:{ // ここは本編と無関係
    red: 'tomato',
  }
  media: {
    sm: (...args) => css`
      @media (max-width: 640px) {
        ${css(...args)}
      }
    `,
  },
};

ThemeProvider でラップ

※ Next.js の場合

import { ThemeProvider } from 'styled-components';
import { theme } from 'styles/theme';

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

これで各所で

const StyledComponent = styled.div`
  color: ${({ theme }) =>
    theme.colors.red}; // theme.js で設定した色を呼び出せる

  ${({ theme }) => theme.media.sm`
    // ここに media query 書く
    background-color: #ccc;
  `};
`;

って感じで theme 使えばどこでも theme から media query を使える

TypeScript の場合

theme.ts

export const theme = {
  media: {
    sm: (
      first: CSSObject | TemplateStringsArray,
      ...interpolations: SimpleInterpolation[]
    ): FlattenSimpleInterpolation => css`
      @media (max-width: 640px) {
        ${css(first, ...interpolations)}
      }
    `,
  },
} as const;

欠点

media query 書くとこは formatter がきかない...

でも,まぁ気軽にどこでもレスポンシブがかけます.