2022年8月に入社した髙田です！

私は、React × Chakra UI で画面実装を行う案件を担当しております！

その際、Chakra UIでスタイルを指定しても適用されず、解決するのにちょっと苦戦したのでまとめてみました。

結論

sxプロパティを使用する。

そもそもChakra UIとは

本題に入る前に、Chakra UIについて軽くご説明します。

Chakra UIは、UIコンポーネントライブラリの一つです。
クラス名を指定することがほぼないので、コードがすっきり見やすくなり、
チーム開発では、UIに一貫性を持たせられるメリットがあります！

sxプロパティとは

sxプロパティは、以下のことに対応しています！

• ① Chakra UIが※未対応のスタイルを適用できる
• ② 独自に定義したクラスにスタイルを適用できる
• ③ カスタムcssを定義することができる
• ④ メディアクエリを設定できる

※本記事内の未対応のスタイルとは、
Chakra UI公式ページにある、Style Propsに記載がないスタイルのことです。

一つ一つ例とともにご紹介します。

① Chakra UIが未対応のスタイルを適用する

今回は、Chakra UIが対応していない(9/26現在)、
ちょっとマイナーなcaret-colorを例にご紹介します。

caret-colorプロパティは、文字を入力する際に出るカーソル（キャレット）の色を変更することができます。

Inputに対して、caret-color=”red”を定義してみます。

<Input caret-color="red" />

色の変化はなく、黒のままです。
次に、sxプロパティを使って定義すると…

<Input sx={{ caretColor: "red", }} />

カーソルの色が赤に変わりました！

もしスタイルが適用されずに悩んでいる方は、Chakra UIがそのスタイルに対してまだ未対応のため動作しない可能性があります。

Props Styleをご確認の上、一度お試しください！

② 独自に定義したクラスにスタイルを適用できる

Boxにhideというクラスを定義しました。
そしてHeadingに対して、BoxがHoverされたらdisplay: none;が作動するようにしています。

<Box w="500px" h="100px" bgColor="red.100" className="hide">
  <Center h="100%">
    <Heading
      sx={{
        ".hide:hover &": {
          display: "none",
        },
      }}
    >
      ChakraUI
    </Heading>
  </Center>
</Box>

display: none;が作動し、文字が消えました。

sxプロパティにクラス名ではなく、Boxを指定しても動作はしませんので、独自にクラスを定義する必要があります！
(上手く動作しない例)

<Box w="500px" h="100px" bgColor="red.100">
  <Center h="100%">
    <Heading
      sx={{
        "Box:hover &": {
          display: "none",
        },
      }}
    >
      ChakraUI
    </Heading>
  </Center>
</Box>

これを使うとChakra UIで実装の幅が広がりそうですね。

③ カスタムcssを定義できる

<UnorderedList sx={{ "--list-color": "#ea5532" }}>
  <ListItem color="var(--list-color)">ChakraUI 1</ListItem>
  <ListItem>ChakraUI 2</ListItem>
  <ListItem>ChakraUI 3</ListItem>
  <ListItem>ChakraUI 4</ListItem>
</UnorderedList>

④ メディアクエリを指定できる

<Heading
  size="4xl"
  sx={{
    "@media (max-width: 1200px)": {
      display: "none",
    },
  }}
>
	ChakraUI
</Heading>

Chakra UIは、 {{ base: 〇〇, md: 〇〇 }} のようにレスポンシブ対応できますが、
細かく例外的にメディアクエリを指定したいときは、上記のようにすると対応できます。

以上、sxプロパティについてご紹介しました。

ぜひお試しください！