条件

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

info

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

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

示例

¥Example

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

¥Here's an example of how to customize conditions in 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)

用法

¥Usage

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

¥Use _off and _on conditions to style elements based on the data-state attribute.

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 变量