CSS を記述する方法は多岐にわたるが、本プロジェクトでは、Material-UI の<Box />
コンポーネントを使用してスタイリングすることを原則とする。
https://material-ui.com/ja/components/box/#box
<Box />
コンポーネントは、ほぼ全ての CSS プロパティを props 経由で指定することができる。
以下の例を実行すると、<Button />
コンポーネントを<div>
で囲み、<div>
にmargin: 8px
が適用される。
<Box margin={1}>
<Button />
</Box>
変換イメージ
<div style="margin: 8px">
<button />
</div>
<Box />
はデフォルトで<div />
に変換されるが、component
prop で変換されるコンポーネントを指定することも可能である。
<Box component="span" margin={1}>
<Button />
</Box>
margin
や padding
などのスペース系は単位なしの数字で指定する。(例:margin={1}
, paddingRight={2}
)
spacing の1
は8px
に変換される。2
だと16px
、0.5
だと4px
となる。
これは、src/styles/theme.tsで、spacing
の単位を8px
に設定しているからである。
export const theme = createMuiTheme({
spacing: 8,
});
<Box />
コンポーネントのclone
prop を指定すると、<Box />
の子要素に対して CSS が設定される。さらにclone
を指定した場合、<Box />
自体は html 要素としてレンダーされない。
<Button />
や<AppBar />
などの Material-UI から import したコンポーネントにスタイルを適用した場合にclone
を指定する。
<Box bgcolor="red" border="black solid 1px" clone>
<Button>Box Styled Button 2</Button>
</Box>
変換イメージ
<button style="
background-color: red;
border: black solid 1px;
">
</button>
以下に動作を確認できるサンプルを作成したので、上記の説明で理解できない場合は見て下さい。
Material-UI にはmakeStyles
を使った CSS の記述(参考)が一般的だが、 <Box />
を使うのは以下の理由があるためである。
前述の通り、<Box />
は CSS のクラスを意識する必要がないため、若干楽に CSS を書くことができる。
makeStyles
を使用する場合、スタイルに対応したクラス名を自分で定義する必要があるため、余計な負担が発生する。
前述の通り、<Box />
は修飾するコンポーネントの近くにスタイルが記述されるため、スタイルを把握しやすい。
makeStyles
に比べて<Box />
を使ったスタイリングは、より少ない記述量で同等のことができる。
makeStyles
を使用したスタイリングはサンプルコードを見て分かる通り、コード量が多くなってしまい見通しが悪くなる。