Center
Center (중앙 정렬)
Center 컴포넌트는 콘텐츠를 가로·세로로 중앙 정렬해 주는 레이아웃 컴포넌트예요. 폴리모픽(polymorphic) 컴포넌트라서 루트 요소를 바꿀 수도 있어요.
출처: 문서
본문
Center 안에 있는 모든 요소는 중앙 정렬돼요.
import { Center, Box } from '@mantine/core';
function Demo() {
return (
<Center maw={400} h={100} bg="var(--mantine-color-gray-light)">
<Box bg="var(--mantine-color-blue-light)">All elements inside Center are centered</Box>
</Center>
);
}
인라인 (Inline)
인라인 요소와 함께 Center를 사용하려면 inline prop을 설정하면 돼요. 예를 들어 링크 아이콘과 라벨을 가운데 정렬할 수 있어요.
import { Center, Anchor, Box } from '@mantine/core';
import { ArrowLeftIcon } from '@phosphor-icons/react';
function Demo() {
return (
<Anchor href="https://mantine.dev" target="_blank">
<Center inline>
<ArrowLeftIcon size={12} />
<Box ml={5}>Back to Mantine website</Box>
</Center>
</Anchor>
);
}
폴리모픽 컴포넌트
Center는 폴리모픽 컴포넌트예요. 기본 루트 요소는 div지만, component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.
import { Center } from '@mantine/core';
function Demo() {
return <Center component="button" />;
}
TypeScript와 함께 쓰는 폴리모픽 컴포넌트
폴리모픽 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 props를 확장하지 않아요. 예를 들어 CenterProps는 div가 기본 요소임에도 React.ComponentProps를 확장하지 않아요.
폴리모픽(또는 component prop을 지원하지 않는) 컴포넌트의 wrapper를 만들고 싶다면, 컴포넌트 props 인터페이스가 HTML 요소 props를 확장하도록 해야 해요.
import type { CenterProps, ElementProps } from '@mantine/core';
interface MyCenterProps extends CenterProps,
ElementProps<'button', keyof CenterProps> {}
래핑 후에도 컴포넌트가 폴리모픽으로 유지되길 원한다면, 가이드에서 설명하는 polymorphic 함수를 사용해요.