このチャプターの目次
基本的には下記installationガイドに従ってインストールします。
Installation
Chakra UIはemotionとframer-motionに依存しているため、これらもインストールする必要があります
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Providerの設定
ThemeやResetCSSのために<ChakraProvider>を利用する必要があります。
他のコンポーネントライブラリと同じですが、なるべくアプリケーションのトップルートでこれを設定します。
import { ChakraProvider } from "@chakra-ui/react"
function AppContainer({children}){
return <ChakarProvider>{children}</ChakraProvider>
}
また、このProviderにはChakra UIのResetCSSが含まれています。
例えば既存アプリケーションに導入する都合などでReset CSSを使いたくない場合は、resetCSS={false}のオプションを利用できるでしょう
function AppContainer({children}){
return <ChakarProvider resetCSS={false}>{children}</ChakraProvider>
}