🌱

Chakra UIの小技集[随時更新]

1 min read

縦横中央に要素を配置する

横はCenterコンポーネントを使い、縦はh="100%"と指定します

import { Center } from "@chakra-ui/react"

<Center h="100%">
  This is the Center
</Center>

https://chakra-ui.com/docs/layout/center

ツールチップに改行を入れる

Tooltipコンポーネントに渡せるPropsの一つであるlabelの型は、ReactNodeなので改行タグ付きのコンポーネントを渡すことができます。

import { Tooltip } from "@chakra-ui/react"

<Tooltip label=<>hoge<br />fuga</> >
  Hover me
</Tooltip>

https://chakra-ui.com/docs/overlay/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",
})

https://chakra-ui.com/docs/theming/theme#breakpoints

また、自分でカスタマイズも可能です。

https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints

下記のようにブレイクポイントごとの値を配列やオブジェクトとして渡せるので、簡単にレスポンシブなスタイリングに対応できます。

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

https://chakra-ui.com/docs/features/responsive-styles#the-array-syntax

Discussion

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