Box

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

Usage

import { Box, Text } from "@seed-design/lynx-react";

export function App() {
  return (
    <Box bg="bg.brandWeak" borderColor="stroke.brandWeak" borderWidth={1} borderRadius="r3" p="x4">
      <Text textStyle="t5Bold" color="fg.brand">
        Box
      </Text>
    </Box>
  );
}

Box는 Lynx 네이티브 <view>를 렌더링합니다. bg, p, borderRadius 같은 스타일 prop은 SEED 토큰을 직접 object style 값으로 변환해 적용합니다.

Props

Style Props

현재 Box에서 여는 스타일 prop은 Lynx에서 안정적으로 검증한 범위로 제한합니다.

명시적인 style prop은 마지막에 merge되므로, 필요한 경우 계산된 스타일을 덮어쓸 수 있습니다.

<Box p="x3" style={{ paddingLeft: "24px" }}>
  <Text>paddingLeft만 직접 override</Text>
</Box>

style prop은 inline style로 적용되므로 같은 속성을 지정한 className utility보다 우선합니다. className으로 지정할 속성은 style prop으로 함께 지정하지 마세요. 예를 들어 px="x3" className="pl-x7"의 왼쪽 패딩은 x3입니다.

pt, pr, pb, pl에 "safeArea"를 지정하면 host가 넘긴 safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft global props를 padding으로 적용합니다. 값이 없거나 음수이면 env(safe-area-inset-*)을 사용합니다. top과 bottom은 값이 0이어도 env()를 사용합니다.

Margin과 Bleed

margin prop은 SEED 토큰, 길이, "auto"를 받습니다. 방향별 prop이 축 prop(mx, my)보다, 축 prop이 m보다 우선합니다.

bleed prop은 음수 margin을 적용해, 요소를 부모의 padding 영역까지 넓힙니다. 값은 "16px" 같은 px 길이, 0, "safeArea"를 받습니다. "safeArea"를 지정하면 같은 방향의 safe area inset만큼 넓힙니다.

<Box pl="safeArea" pr="safeArea">
  <Box bleedX="safeArea" bg="bg.brandWeak">
    배경은 화면 끝까지 채우고, 내용은 부모의 safe area 안쪽 기준으로 둡니다.
  </Box>
</Box>

margin 계열과 bleed 계열은 모두 margin-*으로 변환되므로 함께 지정할 수 없습니다. 이 제약 때문에 BoxProps, VStackProps, HStackProps는 union 타입입니다. 이 타입을 확장할 때는 interface ... extends 대신 type을 사용하세요.

type MyBoxProps = BoxProps & { label: string };

Native Props

Box는 style prop 외에 루트 <view>의 native 속성(className, id, accessibility-*, bind*·main-thread:* 이벤트, data-* 등)과 ref를 받아 그대로 전달합니다. style prop과 같은 이름의 native 속성은 style prop으로 해석합니다.

웹 버전과의 차이