조건(Conditions) 커스터마이징
조건(Conditions) 커스터마이징
Chakra UI에서 조건(conditions)을 커스터마이징하는 방법에 대해 알아봐요. 커스텀 조건을 추가해 data-state 같은 속성에 따라 스타일을 적용할 수 있어요.
출처: 문서
본문
:::info
스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.
:::
예시 (Example)
Chakra UI에서 조건을 커스터마이징하는 예시예요.
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 속성에 따라 요소를 스타일링해요.
import { Box } from "@chakra-ui/react"
<Box data-state="off" _off={{ bg: "red.500" }} />
<Box data-state="on" _on={{ bg: "green.500" }} />