🤖

【React】Chakra UIでcalcを使用する方法

2022/12/14に公開約1,300字

はじめに

本記事では、Chakra UI内での関数calcの使用方法と注意点について述べたいと思います。

Chakra UI

Chakra UIとは、UIのライブラリの一つで、Reactアプリを構築する際に便利なツールです。SimpleGrid, useRadioGroupなど、さまざまなコンポーネントやhookが用意されています。

calcを用いる場面

以下の図のような場面を想定しています。上部にあるバーは画面サイズによらずheightが固定であるとします。下側の領域のみが使える領域でこの領域のheightを指定しなければならない状況だと仮定します。状況としては

  • 二つのブロックを、下側の領域に縦並びで表示させたい
  • ブロック全体を画面に収め、ブロック内側にスクロールバーを表示したい

などが考えられます。


calcが必要になる場面

この時、式としてはheightcalc(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の使用方法について書きました。注意点は演算子周りの空白を抜かさないことです。

参考文献

https://github.com/chakra-ui/chakra-ui/discussions/5216

https://stackoverflow.com/questions/59569174/using-calc-in-mui

Discussion

ログインするとコメントできます