Open3

Next.js + Chakra UI + React Hook Formで困ったこと

Naoto0213Naoto0213

Next.js + Chakra UI + React Hook Formで作るフォーム

使用技術

  • Next.js
  • TypeScript
  • Chakra UI
  • React Hook Form

環境構築

Next.js + TS

導入
$ yarn create next-app --typescript

Chakra UI

公式サイト参照
https://chakra-ui.com/getting-starte

導入
$ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

pages/_app.tsxの中身を下記に変更

pages/_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

React-Hook-Form

導入
$ yarn add react-hook-form

確認

package.jsonに問題なく導入できていれば成功

package.json

{
  "name": "wtc-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.2.1",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "framer-motion": "^6.3.16",
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.0.0",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "eslint": "8.18.0",
    "eslint-config-next": "12.2.0",
    "typescript": "4.7.4"
  }
}
Naoto0213Naoto0213

Chakra UIのthemeを使ってアプリ全体の色を管理したい

CSSで色を管理するのは微妙なので、Chakraのテーマを使う

公式サイトを参考に、、
https://chakra-ui.com/docs/styled-system/customize-theme

_app.tsx
import "../styles/globals.css";

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  styles: {
    global: {
      // bodyの色を設定
      body: {
        bg: "gray.800",
        color: "white",
      },
      // aタグの色を設定
      a: {
        color: "green.500",
        _hover: {
          textDecoration: "underline",
        },
      },
    },
  },
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

背景の色、textの色、リンクの色が変わった

Naoto0213Naoto0213

Chakra UIで縦並びにしたい

縦並びにする方法

1.<Vstack>で括る
2.<Stack>で括る
3. <Flex direction="column">を使う

Vstackとの違い

  • <Vstack/>align = center
  • <Stack/>align = start