Skip to content

Latest commit

 

History

History
99 lines (64 loc) · 3.71 KB

File metadata and controls

99 lines (64 loc) · 3.71 KB

スタイリング

CSS を記述する方法は多岐にわたるが、本プロジェクトでは、Material-UI の<Box />コンポーネントを使用してスタイリングすることを原則とする。

<Box /> コンポーネントの使い方

https://material-ui.com/ja/components/box/#box

コンテナ要素に CSS を適用する場合

<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>

Spacing

marginpadding などのスペース系は単位なしの数字で指定する。(例:margin={1}, paddingRight={2}

spacing の18pxに変換される。2だと16px0.5だと4pxとなる。

これは、src/styles/theme.tsで、spacingの単位を8pxに設定しているからである。

export const theme = createMuiTheme({
  spacing: 8,
});

Material-UI のコンポーネント自身に CSS を適用する場合

<Box />コンポーネントのcloneprop を指定すると、<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>

サンプル

以下に動作を確認できるサンプルを作成したので、上記の説明で理解できない場合は見て下さい。

なぜ <Box />でスタイリングするのか

Material-UI にはmakeStylesを使った CSS の記述(参考)が一般的だが、 <Box />を使うのは以下の理由があるためである。

1. CSS のクラス名を指定する必要がない

前述の通り、<Box />は CSS のクラスを意識する必要がないため、若干楽に CSS を書くことができる。 makeStylesを使用する場合、スタイルに対応したクラス名を自分で定義する必要があるため、余計な負担が発生する。

2. スタイルが把握しやすい

前述の通り、<Box />は修飾するコンポーネントの近くにスタイルが記述されるため、スタイルを把握しやすい。

3. より少ない記述でスタイリングできる

makeStylesに比べて<Box />を使ったスタイリングは、より少ない記述量で同等のことができる。 makeStylesを使用したスタイリングはサンプルコードを見て分かる通り、コード量が多くなってしまい見通しが悪くなる。