Conditions - Chakra Ui

:::info

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

:::

Example

Here's an example of how to customize conditions in Chakra UI.

tsx

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

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

tsx

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

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