Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Conditions

Learn how to customize conditions in 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.

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

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" }} />

Previous

Colors

Next

CSS Variables