상자

상자 (Box)

Chakra UI에서 가장 추상적인 스타일링 컴포넌트로, 다른 모든 Chakra UI 컴포넌트가 그 위에 구축되는 기본 컴포넌트예요. 디자인 토큰과 반응형 스타일 작성을 위한 뛰어난 개발 경험(DX)을 제공해요.

출처: 문서

Box 컴포넌트는 스타일을 손쉽게 작성할 수 있는 방법을 제공해요. 디자인 토큰에 접근할 수 있고, 반응형 스타일을 작성할 때 비교할 수 없는 DX를 제공하답니다.

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

<Box />

backgroundColor 대신 bg, margin 대신 m 같은 단축 표기를 사용할 수 있어요.

_hover 같은 의사 prop을 사용해 호버 시 스타일을 적용하고, _focus를 사용해 포커스 시 스타일을 적용하는 식으로 쓸 수 있어요.

borderWidth와 borderColor prop을 사용해 테두리 스타일을 적용할 수 있어요.

알아두면 좋은 점: Chakra는 전역적으로 borderStyle: solid를 적용하므로, 직접 지정하지 않아도 돼요.

as prop을 사용해 다른 컴포넌트로 렌더링할 수 있어요.

DOM을 검사해 렌더링된 컴포넌트를 확인해 보세요.

boxShadow 또는 shadow prop을 사용해 그림자 스타일을 적용할 수 있어요.

Chakra의 레이아웃 원시 컴포넌트로 만든 속성 카드(property card) 예시예요.

Box 컴포넌트는 모든 CSS 속성을 prop으로 지원하므로, 요소를 쉽게 스타일링할 수 있어요.