Chapter 10無料公開

レスポンシブにするなら複数の値を設定する

terrierscript
terrierscript
2021.05.07に更新
このチャプターの目次

変数の値に配列、またはオブジェクトを渡すことで、レスポンシブな値を設定できます。

<Box bg={["red.200", "yellow.200", "green.200", "blue.200"]} >
  Hello
</Box>

captrue

配列の場合は先(左)に書いた値が横幅が狭い場合の値になります。
上記の場合は狭い状態から広くなるにつれred -> yellow

初期値は下記のように設定されています

sm: "30em", // 480px (16pxの場合。以下同)
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px

また、オブジェクトの形式として記述する場合は下記のようになります。
baseは値が設定されたもの以下の場合になります。

<Box bg={{ base: "red.200", sm: "yellow.200", md: "green.200", lg: "blue.200" }} >
  Hello
</Box>

よくあるユースケースとして、例えばmdを堺にデスクトップ版とモバイル版を切り替えたい場合などはこのような形になります

<Box bg={{ base: "red.200", md: "green.200"}} >
  Hello
</Box>

Demo