自定义
了解如何自定义 Chakra UI 主题
概述
Chakra UI 使用配置系统来定义默认样式系统。
defaultBaseConfig：包含条件和样式属性。defaultConfig：包含来自defaultBaseConfig的所有内容，以及内置的令牌和配方。
从 Chakra UI 导出的 defaultSystem 默认使用 defaultConfig。
自定义主题时，重要的是决定是想将您的配置与 defaultConfig 合并，还是从头开始使用 defaultBaseConfig。
自定义
这些是自定义 Chakra UI 主题所需的关键函数。
defineConfig：用于定义系统配置createSystem：用于根据配置创建样式引擎
theme.ts
import { createSystem, defaultBaseConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
theme: {
tokens: {
colors: {
brand: {
500: "tomato",
},
},
},
},
})
export const system = createSystem(defaultBaseConfig, customConfig)接下来，更新 ChakraProvider 以使用自定义系统。
provider.tsx
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import { system } from "./theme"
export function Provider(props: { children: React.ReactNode }) {
return (
<ChakraProvider value={system}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{props.children}
</ThemeProvider>
</ChakraProvider>
)
}完整自定义
在大多数情况下，我们建议从默认配置开始，只指定您想要自定义的部分。
但是，如果您希望从头开始，可以使用 CLI 脚手架生成默认令牌和配方。
npx @chakra-ui/cli eject --outdir ./theme这将生成一个文件，其中包含 Chakra 中的所有令牌和配方。
TypeScript
自定义默认配置后，您可能需要更新类型。
npx @chakra-ui/cli typegen ./theme.ts