在 Remix 中使用 Chakra

安装依赖

npm i @chakra-ui/react @emotion/react

添加代码片段

代码片段是预构建组件，可帮助您更快地构建 UI。使用 @chakra-ui/cli，您可以将代码片段添加到您的项目中。

npx @chakra-ui/cli snippet add

设置 Emotion 缓存

使用 Remix 沙盒中的代码片段，您可以将 Emotion 缓存添加到您的应用程序中。

Emotion 缓存代码片段

更新 tsconfig

如果您正在使用 TypeScript，您需要更新 tsconfig 文件中的 compilerOptions 以包含以下选项

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}

设置 Provider

在您的应用程序根目录使用 Provider 组件包裹您的应用程序。

此 Provider 包含以下内容

• 来自 @chakra-ui/react 的 ChakraProvider 用于样式系统
• 来自 next-themes 的 ThemeProvider 用于颜色模式

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"

export default function App() {
  return (
    <Provider>
      <Outlet />
    </Provider>
  )
}

尽情享用！

结合代码片段和 Chakra UI 的基础组件的强大功能，您可以更快地构建 UI。

import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}