Box

Box

Box 컴포넌트는 모든 Mantine 컴포넌트의 기반이 되는 기본 컴포넌트예요. 다른 컴포넌트를 만들 때든, 단순한 HTML 요소 대신 쓸 때든 Box가 지원하는 기능을 활용할 수 있어요.

출처: 문서

본문

Box 컴포넌트는 모든 Mantine 컴포넌트의 기반으로 사용됩니다. Box는 다음 기능을 지원해요.

  • component prop
  • style props
  • style prop

직접 만든 컴포넌트의 기반으로 Box를 쓰거나, HTML 요소를 대신하는 용도로도 사용할 수 있어요.

import { Box } from '@mantine/core';

function Demo() {
  return (
    <Box bg="red.5" my="xl" component="a" href="/">
      My component
    </Box>
  );
}

Box는 특히 component prop과 함께 쓰면 원하는 html 태그나 커스텀 컴포넌트로 렌더링되도록 바꿀 수 있어요. 위 예시에서는 Box를 a 태그로 렌더링했어요.

더 알아보기 (Learn more)