Chakra UI の extendTheme で Tab 関連のスタイル更新

Chakra UI、気に入って使わせていただいていますが、extendTheme を使っての既存スタイルの更新でちょっと躓いたので備忘録。

※ スタイル（テーマ）のカスタマイズの基本は公式をご覧ください。

TL;DR

• TabList や Tab などの Tabs 配下に置かれる要素のスタイルは、 baseStyle や 各 variant の下に書いていく
• TabList や Tab などの Tabs 配下に置かれる要素名はキャメルケースではなく全て小文字で書く（ここハマったポイント）
• variant 名はキャメルケースで OK

実装内容

sample

import React from 'react';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';

const verticalShadow = {
  content: `''`,
  position: 'absolute',
  top: 0,
  display: 'block',
  boxShadow: 'inset 0 0 1px rgba(0, 0, 0, .05)',
  width: '1px',
  height: '100%',
};

const theme = extendTheme({
  components: {
    Tabs: {
      baseStyle: {
        // 各 variant （variant なしを含む）共通のスタイルはここ
        tablist: { // キャメルケースではなく小文字で
          backgroundColor: '#f8f8f8',
        },
        tab: {
          _focus: {
            boxShadow: 'none',
          },
        },
        tabpanels: { // キャメルケースではなく小文字で
          // properties
        },
        tabpanel: { // キャメルケースではなく小文字で
          // properties
        },
      },
      variants: {
        // 各 variant ごとのスタイルはここ
        enclosed: {
          tablist: {
            borderTop: '1px solid rgba(45, 45, 45, .1)',
          },
          tab: {
            position: 'relative',
            borderRadius: 0,
            _selected: {
              position: 'relative',
              _before: {
                ...verticalShadow,
                left: 0,
              },
              _after: {
                ...verticalShadow,
                right: 0,
              },
            },
          },
          tabpanels: {
            // properties
          },
          tabpanel: {
            // properties
          },
        },
        newVariant: { // variant はキャメルケースで OK
          // 以下同文
        },
      },
    },
  },
});


export const StyleProvider: React.FC = ({ children }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
);

以上

おわりに

Chakra UI、まだまだ知らないことが多くて使い倒せていないので、今後の React 案件でバンバン使っていきたいと思います。