Mantine Custom Components スキル

コンポーネントテンプレート

import {
  Box, BoxProps, createVarsResolver, ElementProps,
  factory, Factory, getRadius, MantineRadius,
  StylesApiProps, useProps, useStyles,
} from '@mantine/core';
import classes from './MyComponent.module.css';

export type MyComponentStylesNames = 'root' | 'inner';
export type MyComponentVariant = 'filled' | 'outline';
export type MyComponentCssVariables = { root: '--my-radius' };

export interface MyComponentProps
  extends BoxProps, StylesApiProps<MyComponentFactory>, ElementProps<'div'> {
  radius?: MantineRadius;
}

export type MyComponentFactory = Factory<{
  props: MyComponentProps;
  ref: HTMLDivElement;
  stylesNames: MyComponentStylesNames;
  vars: MyComponentCssVariables;
  variant: MyComponentVariant;
}>;

const defaultProps = { radius: 'md' } satisfies Partial<MyComponentProps>;

const varsResolver = createVarsResolver<MyComponentFactory>((_theme, { radius }) => ({
  root: { '--my-radius': getRadius(radius) },
}));

export const MyComponent = factory<MyComponentFactory>((_props) => {
  const props = useProps('MyComponent', defaultProps, _props);
  const { classNames, className, style, styles, unstyled, vars, attributes, radius, ...others } = props;

  const getStyles = useStyles<MyComponentFactory>({
    name: 'MyComponent', classes, props,
    className, style, classNames, styles, unstyled, vars, attributes, varsResolver,
  });

  return <Box {...getStyles('root')} {...others} />;
});

MyComponent.displayName = '@mantine/core/MyComponent';
MyComponent.classes = classes;

Factory バリアント — どれを使用するか

polymorphicFactory は控えめに使用してください — TypeScript のオーバーヘッドが増加し、IDE のオートコンプリートが遅くなります。

Factory 型フィールド

Factory<{
  props: MyComponentProps;       // 必須
  ref: HTMLDivElement;           // 転送される ref のエレメント型
  stylesNames: 'root' | 'inner'; // Styles API セレクタの union
  vars: { root: '--my-var' };    // セレクタごとの CSS 変数マップ
  variant: 'filled' | 'outline'; // 受け入れられるバリアント文字列
  staticComponents: {            // サブコンポーネント (複合パターン)
    Item: typeof MyComponentItem;
  };
  compound?: boolean;            // true = サブコンポーネント; テーマの classNames/styles/vars を無効化
  ctx?: MyContextType;           // 3 番目の引数として styles/vars リゾルバに渡される
  signature?: (...) => JSX.Element; // genericFactory のみ
}>

テーマ統合

ユーザーとテーマは Component.extend() を経由してデフォルトをオーバーライドできます:

const theme = createTheme({
  components: {
    MyComponent: MyComponent.extend({
      defaultProps: { radius: 'xl' },
      classNames: { root: 'my-root' },
      styles: { root: { color: 'red' } },
      vars: (_theme, props) => ({ root: { '--my-radius': getRadius(props.radius) } }),
    }),
  },
});

リファレンス

• references/api.md — すべてのインポート: factory、useProps、useStyles、createVarsResolver、createSafeContext、StylesApiProps、CompoundStylesApiProps、BoxProps、ElementProps、テーマヘルパー (getSize、getRadius など)
• references/patterns.md — 完全な例: コンテキスト付き複合コンポーネント、ポリモーフィックコンポーネント、generic コンポーネント、テーマ統合