조건부 스타일

조건부 스타일 (Conditional Styles)

의사 상태(pseudo state), 미디어 쿼리, 커스텀 data 속성에 따른 스타일을 조건부 style prop으로 작성하는 방법을 알려드려요. 반응형이고 상태 기반인 UI를 만들 때 핵심이에요.

출처: 문서

본문

개요

Chakra를 사용하면 조건부 style prop으로 의사 상태, 미디어 쿼리, 커스텀 data 속성에 대한 스타일을 작성할 수 있어요.

:::note

아래 내장 조건 목록을 참고하세요.

:::

사용법

예를 들어 버튼에 마우스를 올렸을 때 배경색을 바꾸는 방법은 다음과 같아요.

<Box bg="red.500" _hover={{ bg: "red.700" }}>
  Hover me
</Box>

중첩 조건

조건값은 중첩해서 복잡한 선택자 규칙을 만들 수 있어요.

호버 상태에서 포커스 상태일 때 배경색을 바꾸는 방법은 다음과 같아요.

<Box bg={{ base: "red.500", _hover: { _focus: "red.700" } }}>
  Hover & Focus me
</Box>

At 규칙

지원되는 at-rule(@media, @layer, @container, @supports, @page)에서도 동작해요.

<Box
  css={{
    "@container (min-width: 10px)": {
      color: "green.300",
    },
  }}
>
  Hello
</Box>

의사 클래스

Hover, Active, Focus, Disabled

요소의 hover, active, focus, disabled 상태를 스타일링하는 예시예요.

<chakra.button
  _hover={{ bg: "red.700" }}
  _active={{ bg: "red.900" }}
  _focus={{ bg: "red.800" }}
  _disabled={{ opacity: "0.5" }}
>
  Hover me > Hover me
</chakra.button>

First, Last, Odd, Even

리스트에서 첫 번째, 마지막, 홀수, 짝수 요소를 스타일링하는 예시예요.

<Box as="ul">
  {items.map((item) => (
    <Box
      as="li"
      key={item}
      _first={{ color: "red.500" }}
      _last={{ color: "red.800" }}
    >
      {item}
    </Box>
  ))}
</Box>

_even과 _odd 수정자를 사용해서 짝수/홀수 요소도 스타일링할 수 있어요.

<table>
  <tbody>
    {items.map((item) => (
      <chakra.tr key={item} _even={{ bg: "gray.100" }} _odd={{ bg: "white" }}>
        <td>{item}</td>
      </chakra.tr>
    ))}
  </tbody>
</table>

의사 요소

Before와 After

요소의 ::before와 ::after 의사 요소를 스타일링하려면 _before와 _after 수정자를 사용해요.

<Box _before={{ content: '"👋"' }} _after={{ content: '"🥂"' }}>
  Hello
</Box>

Placeholder

input이나 textarea의 placeholder 텍스트를 스타일링하려면 _placeholder 수정자를 사용해요.

<chakra.input
  placeholder="Enter your name"
  _placeholder={{ color: "gray.500" }}
/>

파일 입력

파일 입력 버튼을 스타일링하려면 _file 수정자를 사용해요.

<chakra.input
  type="file"
  _file={{ bg: "gray.500", px: "4", py: "2", marginEnd: "3" }}
/>

미디어 쿼리

모션 줄이기

사용자의 모션 선호도에 따라 요소를 스타일링하려면 _motionReduce와 _motionSafe 수정자를 사용해요.

<Box _motionSafe={{ transition: "all 0.3s" }}>Hello</Box>

색상 스킴

prefers-color-scheme 미디어 기능은 사용자가 시스템에 밝은/어두운 색 테마를 요청했는지 감지할 때 사용돼요.

사용자의 색상 스킴 선호도에 따라 요소를 스타일링하려면 _osLight와 _osDark 수정자를 사용해요.

<chakra.div bg={{ base: "white", _osDark: "black" }}>Hello</chakra.div>

색상 대비

prefers-contrast 미디어 기능은 사용자가 시스템에 높거나 낮은 대비 테마를 요청했는지 감지할 때 사용돼요.

사용자의 색상 대비 선호도에 따라 요소를 스타일링하려면 _highContrast와 _lessContrast 수정자를 사용해요.

<Box bg={{ base: "white", _highContrast: "black" }}>Hello</Box>

방향

orientation 미디어 기능은 사용자 기기가 세로(portrait)인지 가로(landscape) 모드인지 감지할 때 사용돼요.

기기 방향에 따라 요소를 스타일링하려면 _portrait와 _landscape 수정자를 사용해요.

<Box pb="4" _portrait={{ pb: "8" }}>
  Hello
</Box>

선택자

임의 선택자

임의의 선택자를 쓰려면 css prop으로 일회성 선택자 스타일을 작성해요.

<Box css={{ "&[data-state=closed]": { color: "red.300" } }} />

부모 요소의 자식 요소를 대상으로 하는 또 다른 예시예요.

<Box
  css={{
    "& > *": { margin: "2" },
  }}
/>

그룹 선택자

부모 요소의 상태나 속성에 따라 요소를 스타일링하려면 부모 요소에 group 클래스를 추가하고, 자식 요소에서 _group* 수정자를 사용해요.

<div className="group">
  <Text _groupHover={{ bg: "red.500" }}>Hover me</Text>
</div>

이 수정자는 _groupHover, _groupActive, _groupFocus, _groupDisabled 등 모든 의사 클래스 수정자에서 동작해요.

형제 선택자

형제 요소의 상태나 속성에 따라 요소를 스타일링하려면 형제 요소에 peer 클래스를 추가하고, 대상 요소에서 _peer* 수정자를 사용해요.

<div>
  <p className="peer">Hover me</p>
  <Box _peerHover={{ bg: "red.500" }}>I'll change by bg</Box>
</div>

참고: 이 기능은 peer로 표시된 요소가 이전 형제(즉, 스타일링하려는 요소보다 앞에 오는 요소)일 때만 동작해요.

Data 속성

LTR과 RTL

텍스트 방향에 따라 요소를 스타일링하려면 _ltr과 _rtl 수정자를 사용해요.

<div dir="ltr">
  <Box _ltr={{ ml: "3" }} _rtl={{ mr: "3" }}>
    Hello
  </Box>
</div>

State

data-{state} 속성에 따라 요소를 스타일링하려면 해당하는 _{state} 수정자를 사용해요.

<Box data-loading _loading={{ bg: "gray.500" }}>
  Hello
</Box>

이것은 data-active, data-disabled, data-focus, data-hover, data-invalid, data-required, data-valid 같은 일반적인 상태에서 동작해요.

<Box data-active _active={{ bg: "gray.500" }}>
  Hello
</Box>

방향

data-orientation 속성에 따라 요소를 스타일링하려면 _horizontal과 _vertical 수정자를 사용해요.

<Box
  data-orientation="horizontal"
  _horizontal={{ bg: "red.500" }}
  _vertical={{ bg: "blue.500" }}
>
  Hello
</Box>

ARIA 속성

aria-{state}=true 속성에 따라 요소를 스타일링하려면 해당하는 _{state} prop을 사용해요.

<Box aria-expanded="true" _expanded={{ bg: "gray.500" }}>
  Hello
</Box>

참고

Chakra에서 사용할 수 있는 모든 조건 prop 목록이에요.

커스터마이징

Chakra는 나만의 조건을 만들 수 있게 해줘서 기본 preset에 있는 것에 제한되지 않아요. 조건 커스터마이징에 대해 더 알아보려면 여기를 참고하세요.

조건부 스타일