• ..

JavaScript

    メディアクエリのヘルパーを作る

    cssをラップするとメディアクエリが楽に書けるようになります。

    css

    この関数は、styled[element]テンプレートリテラルの中でさらに同じような書き方で書いたスタイルを埋め込みたい時につかいます。共通部分のスタイルを外部にまとめたいときとか便利なやつです。

    import styled, {css} from 'styled-components';
    
    const margin = css`
      ${props => props['data-margin'] || '10px'};
    `;
    
    const Div = styled.div`
      margin: ${margin};
    `;
    Edit styled-components の css

    ラップしよう

    テンプレートリテラル関数

    以下はテンプレートリテラル関数の例です。戻り値はcssの戻り値と同じです。なので${desktop...}...はスタイル)という感じで使うことができます。しかもそのスタイルはメディアクエリで囲まれた状態になります。

    const desktop = (first, ...interpolations) => css`
      @media (max-width: ${sizes[label]}px) {
        ${css(first, ...interpolations)}
      }
    `;

    まとめて定義

    以下はオブジェクトの情報をまとめて、反復処理することでまとめて定義しています。これはmedia.desktopmedia.tabletといった形で使うことができます。

    import {css} from 'styled-components';
    
    const sizes = {
      desktop: 992,
      tablet: 768,
      phone: 576,
    };
    
    const media = Object.keys(sizes).reduce(
      (acc, label) => {
        acc[label] = (first, ...interpolations) => css`
          @media (max-width: ${sizes[label]}px) {
            ${css(first, ...interpolations)}
          }
        `;
    
        return acc;
      },
      {},
    );

    TypeScript

    ちなみに TypeScript で書こうとするとこのようになります。

    import {css, CSSObject, SimpleInterpolation} from 'styled-components';
    
    const sizes: {[index: string]: number} = {
      desktop: 992,
      tablet: 768,
      phone: 576,
    };
    
    const media = Object.keys(sizes).reduce(
      (acc, label) => {
        acc[label] = (
          first: TemplateStringsArray | CSSObject,
          ...interpolations: SimpleInterpolation[]
        ) => css`
          @media (max-width: ${sizes[label]}px) {
            ${css(first, ...interpolations)}
          }
        `;
    
        return acc;
      },
      {} as {[index: string]: Function},
    );
    
    Edit メディアクエリのヘルパー