Mantine自定义组件开发指南：工厂函数、主题集成与TypeScript类型定义

mantine-custom-components by mantinedev/skills

253 周安装量

34 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mantinedev/skills --skill mantine-custom-components

UI组件库 React TypeScript

🇨🇳中文介绍

Mantine 自定义组件技能

组件模板

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;

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

UI组件模式实战指南：构建可复用React组件库与设计系统

10,700 周安装

Node.js 环境配置指南：多环境管理、类型安全与最佳实践

10,500 周安装

React视图过渡API使用指南：实现原生浏览器动画与状态管理

5,700 周安装

Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践

2,600 周安装

场景	工厂函数	类型
标准组件	`factory()`	`Factory<{}>`
支持 `component` 属性（多态）	`polymorphicFactory()`	`PolymorphicFactory<{}>` — 需添加 `defaultComponent` 和 `defaultRef`
属性基于泛型变化（例如 `multiple`）	`genericFactory()`	`Factory<{ signature: ... }>`

Factory<{
  props: MyComponentProps;       // 必需
  ref: HTMLDivElement;           // 用于转发引用的元素类型
  stylesNames: 'root' | 'inner'; // 样式 API 选择器的联合类型
  vars: { root: '--my-var' };    // 每个选择器的 CSS 变量映射
  variant: 'filled' | 'outline'; // 可接受的变体字符串
  staticComponents: {            // 子组件（复合模式）
    Item: typeof MyComponentItem;
  };
  compound?: boolean;            // true = 子组件；禁用主题类名/样式/变量
  ctx?: MyContextType;           // 作为第三个参数传递给样式/变量解析器
  signature?: (...) => JSX.Element; // 仅用于 genericFactory
}>

references/api.md — 所有导入项：factory、useProps、useStyles、createVarsResolver、createSafeContext、StylesApiProps、CompoundStylesApiProps、BoxProps、ElementProps、主题助手（getSize、getRadius 等）
references/patterns.md — 完整示例：带上下文的复合组件、多态组件、泛型组件、主题集成

🇺🇸English

Mantine Custom Components Skill

Component template

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 variant — which to use

Scenario	Factory function	Type
Standard component	`factory()`	`Factory<{}>`
Supports `component` prop (polymorphic)	`polymorphicFactory()`	`PolymorphicFactory<{}>` — add `defaultComponent` and `defaultRef`
Props change based on a generic (e.g. `multiple`)

Use polymorphicFactory sparingly — it adds TypeScript overhead and slows IDE autocomplete.

Factory type fields

Factory<{
  props: MyComponentProps;       // required
  ref: HTMLDivElement;           // element type for the forwarded ref
  stylesNames: 'root' | 'inner'; // union of Styles API selectors
  vars: { root: '--my-var' };    // CSS variable map per selector
  variant: 'filled' | 'outline'; // accepted variant strings
  staticComponents: {            // sub-components (compound pattern)
    Item: typeof MyComponentItem;
  };
  compound?: boolean;            // true = sub-component; disables theme classNames/styles/vars
  ctx?: MyContextType;           // passed to styles/vars resolvers as third arg
  signature?: (...) => JSX.Element; // only for genericFactory
}>

Theme integration

Users and the theme can override defaults via 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

references/api.md — All imports: factory, useProps, useStyles, createVarsResolver, createSafeContext, StylesApiProps, CompoundStylesApiProps, BoxProps, ElementProps, theme helpers (, , etc.)

Weekly Installs

102

Repository

mantinedev/skills

GitHub Stars

First Seen

Feb 19, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex96

gemini-cli95

kimi-cli95

cursor95

opencode95

amp95