ReactでのCSSの変数管理やレイアウトの話

こんにちわ、ななきです。

最近Reactを書くことが多いのですが、CSSの変数管理やレイアウトの構成などどうしてるのか気になったので自分のやっているパターンを書いてみようと思います。

普段はstyled-componenttsを使っているので、それを前提として書いていきます。

CSS関連ファイル構成

ファイルのの構成は基本的に以下のようにしています。

このようにしており、以下がそれぞれの中身ですね。

ここでまとめたobjectや、リセットCSSをApp.js等のrootに当たる箇所で読み込みます。

stylesをThemeProviderというstyles-componentsのヘルパーコンポーネントに渡します。

そうすると下記のようにprops.themeが各コンポーネントに注入され、stylesで作ったobjectを参照出来るようになります。

このようにしてSassでファイル分割をして変数を管理していた時のような感覚で書けます。

また、TypeScriptを使っていれば保管も効くのでより書きやすくなります。

ちなみにメディアクエリの管理は 公式の Media Templates を参考に管理しています。

レイアウトの構成

ここでいうレイアウトというのは全体を囲う要素等に当たります。

自分の場合は一番外側にoverflow: auto;をかけています。

構成としてはこんな感じですね。

一番外の要素に height: 100%; をつけることで子要素は height の%指定をすることが出来るようになります。

続いて Wrapper で display: flex; を指定し、 Main で flex: 1; を指定しているので、コンテンツの高さが画面の高さに満たなくてもfooterは一番下に固定されてくれます。

まとめ

多分同じようなことだったり、もっといい構成でやってる方もいるとは思いますがスタイル周りの構成の情報ってあまり見ないなって感じた(知らないだけかも)ので自分のやり方を書いてみました。

こうした方がいいとか、自分はこうやってるみたいなのがあれば教えていただけるとうれしいです。

Archives

MasatoChiba
Frontend Developer