MsSxmTXLOG

styled-componentsでメディアクエリを使い回したい

12/3/2023

サーバーサイドレンダリングが主流になりつつある昨今

css in jsが追いついていない

でもcss in jsはめちゃくちゃ書きやすい・管理しやすい

とはいえ

  • インタラクティブな操作を行うことができる
    • ブラウザAPIを利用することができる

      です

      メディアクエリでスタイルを変えたい場合

      javascriptでwindwオブジェクトからウィンドウサイズを取得してというやり方もありますが今回はcssでやりたい場合のお話

      通常メディアクエリの書き方は普通にこんな感じ

       @media screen and (min-width: 920px) {
   /* 何らかのスタイル */
  }

h1 { color:black }

@media screen and (min-width: 920px) {
   h1 { color:red }
  }

      /* 何らかのスタイル */のところに都度任意のスタイルを渡したい

      要はメディアクエリを使い回したい

      styled-componentsからimportしたcssを使います

      import {css} from 'styled-components';

export const mediaQueryPc = ($styles: CSSObject | RuleSet) => css`
  @media screen and (min-width: 920px) {
    ${$styles}
  }
`;
      CSSObject と RuleSetの方はstyled-componentsからimportできます
      CSSObject は所謂普通のcssの記述、RuleSetはtyled-componentsからimportしたcssを使用したオブジェクト
      どちらも許容するようにしています
      styled-componentsではSass（SCSS記法）みたいな感じでで書くので
      使用するときはこんな感じで書きます
      import styled from 'styled-components';
import {mediaQueryPc} from 'your-path';

const _H1 = styled.h1`
  color: black;
  ${mediaQueryPc({color:"red")} /* 920px以上で文字色が赤になる */
`;
      生成されるcssはこんな感じになるかと
      /* 通常のスタイル */
.h1__0 {
  color: black;
}

/* メディアクエリ内のスタイル */
@media screen and (max-width: 100px) {
  .h1__0 {
    color: red;
  }
}
      以上
      © 2024 mssxmt