표시
표시 (Display)
요소의 표시(display)를 스타일링하는 JSX 스타일 prop을 알려드려요. 요소를 보이게/숨기게 하는 다양한 방법을 활용할 수 있어요.
출처: 문서
본문
Display Property
<Box display="flex" />
// responsive
<Box display={{ base: "none", md: "block" }} />
| Prop | CSS Property | Token Category |
|---|---|---|
display |
display |
- |
요소 숨기기
Hide From
hideFrom prop을 사용해서 특정 브레이크포인트부터 요소를 숨기세요.
<Box display="flex" hideFrom="md" />
| Prop | CSS Property | Token Category |
|---|---|---|
hideFrom |
display |
breakpoints |
Hide Below
hideBelow prop을 사용해서 특정 브레이크포인트 아래에서 요소를 숨기세요.
<Box display="flex" hideBelow="md" />
| Prop | CSS Property | Token Category |
|---|---|---|
hideBelow |
display |
breakpoints |