CSS 变量

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

info

请先阅读 overview 组件，了解如何正确自定义样式引擎并确保类型安全。

¥Please read the overview first to learn how to properly customize the styling engine, and get type safety.

变量根

¥Variable Root

以下示例展示了如何自定义应用 token CSS 变量的选择器。

¥Here's an example of how to customize the selector that token CSS variables are applied to.

theme.ts

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

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

export const system = createSystem(defaultConfig, customConfig)

发出的 CSS 变量现在将应用于 html 元素。

¥The emitted CSS variables will now be applied to the html element.

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

变量前缀

¥Variable Prefix

以下示例展示了如何自定义发出的 CSS 变量的前缀。

¥Here's an example of how to customize the prefix of the emitted CSS variables.

theme.ts

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

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

export const system = createSystem(defaultConfig, customConfig)

发出的 CSS 变量现在将使用 sui 前缀。

¥The emitted CSS variables will now use the sui prefix.

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

条件

全局 CSS