Paper

Paper

색상 스킴에 따라 흰색 또는 어두운 배경을 렌더링하는 다형성(polymorphic) 컴포넌트예요. 카드, 드롭다운, 모달처럼 배경과 그림자가 필요한 컴포넌트를 만들 때 사용해요.

출처: 문서

본문

사용법 (Usage)

Paper는 가장 기본적인 UI 컴포넌트예요. 그림자와 배경이 필요한 카드, 드롭다운, 모달 및 기타 컴포넌트를 만드는 데 사용해요.

import { Text, Paper } from '@mantine/core';

function Demo() {
  return (
    <Paper shadow="md" radius="md" p="xl" withBorder>
      <Text>Paper is the most basic ui component</Text>
      <Text size="sm" c="dimmed">
        Use it to create cards, dropdowns, modals and other components that require
        background with shadow
      </Text>
    </Paper>
  );
}

shadow, radius, withBorder prop으로 그림자, 모서리 반경, 테두리를 설정할 수 있어요.

다형성 컴포넌트 (Polymorphic component)

Paper는 다형성 컴포넌트예요. 기본 루트 요소는 div이지만, component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

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

function Demo() {
  return <Paper component="article">{/* ... */}</Paper>;
}

component prop에는 예를 들어 Next.js의 Link 같은 컴포넌트도 사용할 수 있어요.

import Link from 'next/link';
import { Paper } from '@mantine/core';

function Demo() {
  return <Paper component={Link} href="/">{/* ... */}</Paper>;
}

TypeScript와 다형성 컴포넌트 (Polymorphic components with TypeScript)

다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 prop을 확장하지 않아요. 예를 들어 PaperProps는 div가 기본 요소임에도 React.ComponentProps<'div'>를 확장하지 않아요.

다형성이 아닌(즉 component prop을 지원하지 않는) 다형성 컴포넌트의 래퍼를 만들려면, 컴포넌트 prop 인터페이스가 HTML 요소 prop을 확장해야 해요. 예:

import type { PaperProps, ElementProps } from '@mantine/core';

interface MyPaperProps extends PaperProps<'div'>, ElementProps<'div', 'color'> {}

래핑 후에도 컴포넌트가 다형성으로 유지되게 하려면 이 가이드에서 설명하는 polymorphic 함수를 사용해요.

더 알아보기 (Learn more)

• Marquee
• Portal
• 다형성 컴포넌트 가이드