🤖
【React】Chakra UIでcalcを使用する方法
はじめに
本記事では、Chakra UI内での関数calcの使用方法と注意点について述べたいと思います。
Chakra UI
Chakra UIとは、UIのライブラリの一つで、Reactアプリを構築する際に便利なツールです。SimpleGrid, useRadioGroupなど、さまざまなコンポーネントやhookが用意されています。
calcを用いる場面
以下の図のような場面を想定しています。上部にあるバーは画面サイズによらずheightが固定であるとします。下側の領域のみが使える領域でこの領域のheightを指定しなければならない状況だと仮定します。状況としては
- 二つのブロックを、下側の領域に縦並びで表示させたい
- ブロック全体を画面に収め、ブロック内側にスクロールバーを表示したい
などが考えられます。
calcが必要になる場面
この時、式としてはheightをcalc(100vh - 20px)のように指定します。
Chakra UIでの実現方法
以下のように記述します。変数heightにstringの形で渡します。
App.tsx
import { Box, Text } from "@chakra-ui/react"
export default function ChakraWithCalc(){
return (
<Box height=`calc(100vh - 20px)`>
<Text>
Hello!
</Text>
</Box>
)
}
注意に書いたことを具体的に見ていきましょう。自分の環境では、演算子の周りの空白を抜かすと、heightが指定されていない挙動と同じになりました。
App.tsx
export default function ChakraWithCalc(){
return (
+ <Box height=`calc(100vh - 20px)`>
- <Box height=`calc(100vh-20px)`>
<Text>
Hello!
</Text>
</Box>
)
}
まとめ
Chakra UIにおけるcalcの使用方法について書きました。注意点は演算子周りの空白を抜かさないことです。
参考文献
Discussion