首先，讓專案安裝好 Chakra UI

如果是已經開好專案的項目上可以經過一下操作

第一步 npm install

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

第二步 wrap component with ChakraProvider

import * as React from 'react'

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

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

更詳細的安裝步驟 參考官網

也可以使用 Create React App 建立專案，這時可以用 chakra-ui 的 CRA template

npx create-react-app my-app --template @chakra-ui

custom theme

在安裝好 Chakra UI 後，我習慣在 src 底下創建一個 theme 的資料夾創建 theme.js 方便更改主題以及之後的維護

回到 App.js 把 所創建的 theme 引入到 ChakraProvider

import theme from 'theme/theme';

<ChakraProvider theme={theme}>
<App />
</ChakraProvider>

下一篇將會用 Ocrean design system 示範 客製 design token: colors