CSS in JS としてのChakra UI のススメ

Chakra UIというフレームワークが、自分の中ですごく好きなものだったのでもっと色んな人に使って欲しいという思いから宣伝記事を書いてみました。

https://chakra-ui.com/

このChakra UI ですが、もちろん普通のUIライブラリとしてコンポーネントを使うのも良いのですが、CSS in JSとしても普通に便利です。

どうゆうことか言うとchakraのベースとなっている@chakra-ui/systemがCSS-in-JSであるemotionにデザインシステムを導入し、TypeScriptでいい感じにかけるようなライブラリと捉える事ができるからです。

導入

emotionに加えて@chakra-ui/systemをインストールします。

yarn add @emotion/react @emotion/styled
yarn add @chakra-ui/system

使い方

import { chakra } from "@chakra-ui/system";

const App = () => (
  <chakra.div bg="white" w="full" ... />
)

素のCSS-in-JSと加えてbreakpointや疑似クラスが少し快適になります。

  <Box
    display={{ base: "none", md: "flex" }}
    alignItems="center"
    as="a"
    aria-label="Sponsor Chakra UI on Open Collective"
    href={siteConfig.openCollective.url}
    target="_blank"
    rel="noopener noreferrer"
    bg="gray.50"
    borderWidth="1px"
    borderColor="gray.200"
    px="1em"
    minH="36px"
    borderRadius="md"
    fontSize="sm"
    color="gray.800"
    outline="0"
    transition="all 0.3s"
    _hover={{
      bg: "gray.100",
      borderColor: "gray.300",
    }}
    _active={{
      borderColor: "gray.200",
    }}
    _focus={{
      boxShadow: "outline",
    }}
    {...props}
  >

chakraのウェブサイトのコードとか見ると、便利なCSS-in-JSとして使えるなとわかると思います。
ちなみに、Boxとはchakra.divと同等です。

https://github.com/chakra-ui/chakra-ui/blob/cf5fbec2a256bd67342f7276f6c0b5f04d31ee24/website/src/components/sponsor-button.tsx#L6

他にはこことか。
https://github.com/chakra-ui/chakra-ui/blob/e190ce1b30e17eb0cffaa00c7ec2660d25ba6c23/packages/menu/src/menu.tsx#L75

Themeを使うとこんなかんじです。

import { chakra, ThemeProvider } from "@chakra-ui/system";
import { Theme } from "@emotion/react";


* https://github.com/chakra-ui/chakra-ui/blob/main/packages/menu/src/menu.tsx#L75
const theme: Theme = {
  space: {
    sm: "6px",
    md: "12px",
    lg: "18px",
  },
  colors: {
    primary: {
      100: "#cceeff",
    },
  },
};

const App　= () => (
      <ThemeProvider theme={theme}>
        <chakra.div w="100" p="md" bg="primary.100">
          aaa
        </chakra.div>
      </ThemeProvider>
  )

https://styled-system.com/

styled-system等を使ってこれらを定義することも可能ですが、
この類は諸々の理由からライブラリに任せられるなら任せたいですよね。

CSS-in-JSにいい感じにデザインシステムを導入したいときは、@chakra-ui/systemは一つの選択肢になるのではないでしょうか？？

わざわざsystemパッケージを使わずともchakra-uiは普通にいい感じのUIフレームワークなのでぜひ使ってみてください。