기본 props

기본 props (Default props)

theme.components를 설정해 모든 Mantine 컴포넌트의 기본 props를 정의할 수 있어요. 이 props는 컴포넌트 props로 재정의되지 않는 한 애플리케이션의 모든 컴포넌트에서 기본으로 사용돼요:

import { MantineProvider, Button, Group, createTheme } from '@mantine/core';

const theme = createTheme({
  components: {
    Button: Button.extend({
      defaultProps: {
        color: 'cyan',
        variant: 'outline',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button>Default button</Button>
        <Button color="red" variant="filled">Button with props</Button>
      </Group>
    </MantineProvider>
  );
}

출처: 문서

본문

MantineThemeProvider로 기본 props 정의

MantineThemeProvider를 사용해 애플리케이션의 일부에 대한 기본 props를 정의할 수도 있어요:

import {
  Button,
  createTheme,
  MantineThemeProvider,
} from '@mantine/core';

const theme = createTheme({
  components: {
    Button: Button.extend({
      defaultProps: {
        color: 'cyan',
        variant: 'outline',
      },
    }),
  },
});

function Demo() {
  return (
    <>
      <MantineThemeProvider theme={theme}>
        {/* Part of the app with theme */}
        <Button>With theme</Button>
      </MantineThemeProvider>
      {/* Another part without theme */}
      <Button>Without theme</Button>
    </>
  );
}

복합 컴포넌트의 기본 props

Menu와 Tabs 같은 일부 컴포넌트는 연관된 복합 컴포넌트(Menu.Item, Tabs.List 등)를 가져요. 컴포넌트 이름에서 점(dot)을 빼면 이 컴포넌트들에 기본 props를 추가할 수 있어요:

import {
  createTheme,
  MantineProvider,
  Menu,
  Tabs,
} from '@mantine/core';

const theme = createTheme({
  components: {
    MenuItem: Menu.Item.extend({
      defaultProps: { color: 'red' },
    }),

    TabsList: Tabs.List.extend({
      defaultProps: {
        justify: 'center',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

useProps 훅

useProps 훅을 사용해 어떤 커스텀 컴포넌트에든 기본 props 지원을 추가할 수 있어요. useProps는 세 개의 인자를 받아요:

• 컴포넌트 이름(문자열) – 컴포넌트를 theme과 연결하는 데 사용돼요

• defaultProps – 컴포넌트 수준의 기본 props – theme에 기본 props가 정의되지 않았을 때 이 props가 사용돼요

• props – 컴포넌트에 전달된 props

import { useProps, MantineThemeProvider, createTheme } from '@mantine/core';

interface CustomComponentProps {
  color?: string;
  children?: React.ReactNode;
}

const defaultProps = {
  color: 'red',
} satisfies Partial<CustomComponentProps>;

function CustomComponent(props: CustomComponentProps) {
  const { color, children } = useProps('CustomComponent', defaultProps, props);
  return <div style={{ color }}>{children}</div>;
}

const theme = createTheme({
  components: {
    CustomComponent: {
      defaultProps: {
        color: 'green',
      },
    },
  },
});

function Demo() {
  return (
    <MantineThemeProvider theme={theme}>
      <CustomComponent>Default color</CustomComponent>
      <CustomComponent>Provider color</CustomComponent>
      <CustomComponent color="blue">Prop color</CustomComponent>
    </MantineThemeProvider>
  );
}

withProps 함수

모든 Mantine 컴포넌트에는 컴포넌트에 기본 props를 추가하는 데 사용할 수 있는 withProps 정적 함수가 있어요:

import { Button, TextInput } from '@mantine/core';

const LinkButton = Button.withProps({
  component: 'a',
  target: '_blank',
  rel: 'noreferrer',
  variant: 'subtle',
});

const PhoneInput = TextInput.withProps({
  label: 'Your phone number',
  placeholder: 'Your phone number',
});

function Demo() {
  return (
    <>
      {/* You can pass additional props to components created with `withProps` */}
      <LinkButton href="https://mantine.dev">Mantine website</LinkButton>
      {/* Component props override default props defined in `withProps` */}
      <PhoneInput />
    </>
  );
}

더 알아보기 (Learn more)

• Typography
• Styles overview