参考にさせていただいたページ
インストール
frontendディレクトリで作業をしていきます。
% cd frontend/
インストールします。
% yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
ChakraProviderコンポーネントの設置
公式ページに倣って、frontend/src/pages/_app.tsにChakraProviderコンポーネントを設置します。
開発環境を起動する
% docker-compose up
試しにButtonコンポーネントを使ってみる
「Button - Chakra UI」を参考に frontend/src/pages/index.tsx 内で以下のようにButtonをインポートします。
import { Button } from '@chakra-ui/react';
Buttonを以下のような感じで適当な場所に設置します。
<Button colorScheme="blue">ボタン</Button>
以下の画像のようにButtonが設置できました。
