[ ChakraUI ] Inputコンポーネントのデフォルトのスタイルを変更する方法

はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生、@shuniiです！
今回はChakraUIでめんどくさかったことがあったのでまとめたいと思います。

問題

ChakraUIでコンポーネント(ChakraUIが用意してくれている)のスタイルを変更できない。

僕はInputコンポーネントのスタイルを以下のようにグローバルに設定しようとしていました。Inputコンポーネントはinputとしてブラウザに表示されているのでこの書き方でいけるかなと思いました。

theme.ts

export const theme = extendTheme({
  styles: {
      input: {
        fontSize: "1em",
        h: "30px",
      },
    },
  },
});

import //略
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}> {/* <= ここでthemeを適用 */}
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

解決策

以下のように書き方を変える。
componetsキーのところに書くと反映される

export const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
        field: {
          fontSize: "1em",
          h: "30px",
        },
      },
    },
  },
});

あと、コンポーネントによって少し書き方が異なるようです。defaultStyleを変更しても適用されない場合もあります。

その他のコンポーネントについてはこちらの方の記事を参考にしていただけると良いかと思います。

終わりに

大量のcssを書く必要がなくなるのだから、しっかりとルールくらいは読むべきですよね笑

About Me

• X(Twitter)

参考