CSS 变量

了解如何在 Chakra UI 中定制 CSS 变量

信息

请阅读概述，了解如何正确定制样式引擎并获得类型安全。

变量根

以下是如何定制令牌 CSS 变量所应用选择器的示例。

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  cssVarsRoot: ":where(html)",
})

export const system = createSystem(defaultConfig, customConfig)

生成的 CSS 变量现在将应用于 html 元素。

:where(html) {
  --chakra-colors-gray-100: #e6f2ff;
  --chakra-colors-gray-200: #bfdeff;
  --chakra-colors-gray-300: #99caff;
}

变量前缀

以下是如何定制生成的 CSS 变量前缀的示例。

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  cssVarsPrefix: "sui",
})

export const system = createSystem(defaultConfig, customConfig)

生成的 CSS 变量现在将使用 sui 前缀。

:where(html) {
  --sui-colors-gray-100: #e6f2ff;
  --sui-colors-gray-200: #bfdeff;
  --sui-colors-gray-300: #99caff;
}

条件

全局 CSS