🌱

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

2021/09/01に公開

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

横は 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