条件

了解如何在 Chakra UI 中自定义条件

信息

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

示例

以下是在 Chakra UI 中自定义条件的示例。

theme.ts

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

const customConfig = defineConfig({
  conditions: {
    off: "&:is([data-state=off])",
    on: "&:is([data-state=on])",
  },
})

export const system = createSystem(defaultConfig, customConfig)

用法

使用 _off 和 _on 条件根据 data-state 属性设置元素样式。

app.tsx

import { Box } from "@chakra-ui/react"

<Box data-state="off" _off={{ bg: "red.500" }} />
<Box data-state="on" _on={{ bg: "green.500" }} />

颜色

CSS 变量