Chapter 07無料公開

Theme: サイズ・Spacingに関するTheme

terrierscript
terrierscript
2021.05.08に更新

Themeのサイズに関する部分も触れておきます

サイズに関するTheme

サイズに関するものとして、様々な箇所でxssmmdlg, xlなどがよく出現します。
それぞれsmallsmlargelgと略したものになります。
これらのキーワードはBootstrapのGridなどでも馴染み深いかもしれません

例えば下記のような箇所で出現します。

あくまでキーワードとして使われているだけで、使われる場所、文脈よって値が変わる相対的なものなのでその点は注意が必要です。

基本的には下記のように値の指定の代わりなどで指定します。

<Text fontSize="sm">Small Text</Text>

Spaceに関するTheme

paddingを始めとした空白に関するサイズや、top, leftのような値は基本的にThemeの値が利用されます。

これらはそのままpxが使われるわけではなく、Themeの値になるため、慣れてない場合意図しない挙動になるため注意が必要です。

// 4pxではなくThemeの4=1rem(16px)
<Box p={4} />

// 4pxにしたい場合はpxを明示
<Box p={"4px"} />

Tailwindなどを参考にされているので、馴染みのある場合は困りませんが、通常のCSSの感覚で利用すると意図しない挙動となるので注意が必要です。

値はpx換算した場合は4倍にスケールされているので、p={10}であればp="40px"と考えると自然に考えることが出来ます。

おおむね一般的なデザインで利用するような値は設定されているので、ほとんど困ることは無いのですが、逆にあまり使われない奇数値などが使われる場合はpxに変換されてしまうので少々注意が必要です。

<Box px={10}><Box bg={"red.100"}>10</Box></Box> // 2.5rem = 40px
<Box px={11}><Box bg={"red.100"}>11</Box></Box> // 11px
<Box px={12}><Box bg={"red.100"}>12</Box></Box> // 3rem = 48px
<Box px={11}><Box bg={"red.100"}>13</Box></Box> // 13px

size