レスポンシブ対応したサイトを作成する場合、PCとSPでスタイルを切り替えたり、表示内容を変えたりすると思うのですが、 私がやっているTSX側とSCSS側の切り替え方法について記載します。
React側の準備
react-responsiveを使って、指定サイズ以下になった場合をSPとして判定します（ここでは860px）。
インストール
$ yarn add -E react-responsive -> "react-responsive": "9.0.2
判定コード
hooks/useSp.ts
import { useMediaQuery } from 'react-responsive'; export const useSp = () => { return useMediaQuery({ maxWidth: 860 }); };
Sass側の準備
インストール
$ yarn add -E sass -> "sass": "1.64.1"
判定コード
CSSのメディアクエリーを使って、指定サイズ以下で判定されるSassのミックスインを定義します。
styles/utils.scss
@mixin sp { @media screen and (max-width: 860px) { @content; } }
これでユーティリティの準備は終わりです。
利用例
上記で作成した判定コードは、以下のようにして利用することができます。
SCSS側
SampleComponent.module.scss
@use 'styles/utils'; .container { width: 400px; @include utils.sp { width: 100%; } }
デフォルトのスタイルはPC用で定義し、SP用に変更が必要な要素だけ上書くように書きます。
TSX側
SampleComponent.tsx
import { useSp } from '@/hooks/useSp'; import ss from './SampleComponent.module.scss'; export const SampleComponent = () => { const isSp = useSp(); return <div className={ss.container}>{isSp ? 'SP表示' : 'PC表示'}</div>; }
importパスの@/が使えるように、tsconfig.jsonに以下の設定を追加しています。
"baseUrl": "src", "paths": { "@/*": ["./*"] },
なんかうまくいかない場合
そもそもレスポンシブを有効にするには、htmlのheadタグにviewportのmetaタグを設定する必要があるので、 以下のような設定が入っているかを確認してください。
<head> <meta name='viewport' content='width=device-width, initial-scale=1' /> </head>
またuseSpはクライアントサイドでの動作になるので、レンダリング前は判定が動きません。
これらに気をつけて実装を行ってください。
