Open

Chakra UI(styled system) の推しポイント

13

記述が楽になる系

Flex コンポーネント

https://chakra-ui.com/docs/layout/flex
<Flex color="white">
  <Center w="100px" bg="green.500">
    <Text>Box 1</Text>
  </Center>
  <Square bg="blue.500" size="150px">
    <Text>Box 2</Text>
  </Square>
  <Box flex="1" bg="tomato">
    <Text>Box 3</Text>
  </Box>
</Flex>

更に Center とかもう少し詳細なものもある

レスポンシブの記述が楽 - array syntax で書ける

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

ブレイクポイントを設定してあげると

import { createBreakpoints } from "@chakra-ui/theme-tools"
const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em"})

配列でブレイクポイントごとの値が指定できる

<Box bg="red.200" w={[300, 400, 560]}>
  This is a box
</Box>

Stack

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

等幅のマージンを持つコンテナーが楽に書ける。divider も付けられる

<HStack spacing="24px">
  <Box w="40px" h="40px" bg="yellow.200">
    1
  </Box>
  <Box w="40px" h="40px" bg="tomato">
    2
  </Box>
  <Box w="40px" h="40px" bg="pink.100">
    3
  </Box>
</HStack>

設計思想的な話

大体ほしいのこの辺よね

  1. Style consistently with a global theme
  2. Respond to changing requirements quickly
  3. Create mobile-first responsive layouts with ease

https://jxnblk.com/blog/the-three-tenets-of-styled-system/

Consistency と respond quickly は一見対立する概念ではあるけど、theme で consistent なスタイルを保ちつつ、コンポーネント独自の部分はクイックに変えられるようバランスを保つという考え方いい。

デザインシステムのフレームワークとして守りの文脈と、新しい UI 作っていくぞ!な攻めの文脈

基本は theme でカッチリとベースのスタイルを定義して、Box などを style prop を受け取るようにして簡単に拡張できるようにしている。

ちょっと割れ窓感はあるので、もう少し書き方の規約を言語化したいところではあるが、思想的にはすごくわかる

UIライブラリ、基本的に見た目の部分は書き換えたくなるので、Headless UI ライクに使えるところも嬉しい。欲しいのはアクセシビリティの部分だけだったりするので

アクセシビリティ

アクセシビリティサポートがドキュメントに記載されている

Pressing space or enter when focus is on the accordion panel header will toggle (expand or collapse) the accordion.

https://chakra-ui.com/docs/disclosure/accordion

他との比較

Tailwind
React-aria, spectrum

当たりとは比べておきたい

比較した結果、欲しいのはChakra UIでなく react-aria + styled systemだったみたいなのもあり得なくはなさそう

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