チャクラに対するイントロ

チャクラUIは、コンポーネント自体を構築することを心配することなく、アプリケーションを作成する機能を与える単純なAPIが含まれてモジュラーコンポーネントライブラリです.これは、スタイルの小道具とコンポーネント内のスタイルを開発者を可能にするスタイリングとカスタマイズのための感情を使用します.コンポーネントはダークモード互換性があり、ボックスとスタックのレイアウトを使用します.

インストール
端末で:npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
用途
また、アプリケーションのルートでchakraproviderを設定する必要があります.

import * as React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App() {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

次へ.JSを使用すると、ページ/Countアプリでこれを設定する必要があります.JSまたはページ/アプリ.TSX

Gatsbyでは、@ chakra ui/gatsbyプラグインをインストールします.それはあなたのために自動的にそれを行います.

作成反応アプリの場合は、インデックスでこれを設定する必要があります.インデックス.TSX

テーマの例
チャクラUIは、深いカスタマイズを使用してデフォルトのテーマをマージする拡張機能を提供しています.

// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

カラーモードの例
Chakraprovider自動的にアプリケーションのルートで使用される色モードを使用します.デフォルトでは、チャクラのコンポーネントのほとんどはダークモード互換性があります.アプリケーションで手動でカラーモードを処理するには、usecolorModeまたはusecolorModeValueフックを使用します.
UseColorMode :

function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}

グローバルスタイルの例
アプリケーションのルートでchakraproviderを使用すると、自動的にGlobalStyleコンポーネントをレンダリングします.これは、テーマで定義されたスタイルを読み取ります.スタイル.スタイルオブジェクト、またはスタイルオブジェクトを返す関数であるグローバル.次に、スタイルを処理し、グローバルスタイルのインジェクションを処理するための感情のグローバルコンポーネントに渡します.

// 1. Using a style object
const theme = {
  styles: {
    global: {
      "html, body": {
        fontSize: "sm",
        color: "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: "teal.500",
      },
    },
  },
}
// 2. Using a function
// NB: Chakra gives you access to `colorMode` and `theme` in `props`
const theme = {
  styles: {
    global: (props) => ({
      "html, body": {
        fontSize: "sm",
        color: props.colorMode === "dark" ? "white" : "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
      },
    }),
  },
}

これはチャクラのUIとその機能のいくつかの簡単な概要です.公式にsite , あなたは色モード、グラデーション、グローバルスタイル、および詳細についてを読むことができます.
参考文献

https://chakra-ui.com/docs/getting-started

https://www.freecodecamp.org/news/how-to-use-chakra-ui-with-next-js-and-react/

https://stackshare.io/chakra-ui