🌱
Chakra UIの小技集[随時更新]
縦横中央に要素を配置する
横はCenterコンポーネントを使い、縦はh="100%"と指定します
import { Center } from "@chakra-ui/react"
<Center h="100%">
This is the Center
</Center>
ツールチップに改行を入れる
Tooltipコンポーネントに渡せるPropsの一つであるlabelの型は、ReactNodeなので改行タグ付きのコンポーネントを渡すことができます。
import { Tooltip } from "@chakra-ui/react"
<Tooltip label=<>hoge<br />fuga</> >
Hover me
</Tooltip>
簡単にレスポンシブなスタイリングを実現する
Chakra UIでは下記のようなブレイクポイントがデフォルトで用意されています。
// theme.js
import { createBreakpoints } from "@chakra-ui/theme-tools"
export default createBreakpoints({
sm: "30em",
md: "48em",
lg: "62em",
xl: "80em",
"2xl": "96em",
})
また、自分でカスタマイズも可能です。
下記のようにブレイクポイントごとの値を配列やオブジェクトとして渡せるので、簡単にレスポンシブなスタイリングに対応できます。
<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
This is responsive text
</Text>
Discussion