Mantineを使ったコンポーネントのPropsを定義するときに役立つ型情報
Mantine
フロントエンド
2025年4月6日
Mantineのコンポーネントを使ったコンポーネントのPropsを定義をするとき、
Propsの型をどう指定するんだろう ? というときに役立つ型情報を紹介します。
Mantineの各コンポーネントのProps型
Mantineの各コンポーネントのProps型は <コンポーネント名>Props でexportされています。
import type { ButtonProps } from "@mantine/core";
export type MyButtonProps = ButtonProps & {
// 追加のprops
};
Style props だけ指定できるようにしたい
Style props とは、inlineでcssを指定できる機能です。
// my == margin-block
// c == color
<Box my="10px" c="red" >...</Box>Style props の型は MantineStyleProps です。
import { Box, type MantineStyleProps } from "@mantine/core";
export type MyComponentProps = MantineStyleProps & {
// 追加のprops
children: React.ReactNode;
};
export const MyComponent = ({ children, ...props }: MyComponentProps) => {
return <Box { ...props }>{ children }</Box>;
};
className, hiddenFrom, visibleFromなどよく使うpropsを指定できるようにしたい
BoxProps を使えば良いと思います。
BoxProps は、MantineStyleProps + className, style, hiddenFrom, visibleFrom, lightHidden, DarkHidden です。
variant, sizeも指定したいときは、BoxComponentProps を使います。
https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/Box/Box.tsx
Propsの各プロパティの型を取り出したい
コンポーネントPropsの各プロパティの型を取り出したいときは、
<Component名>Props["取り出したいプロパティ"]で取り出すことができます。
import type { BoxProps } from "@mantine/core";
type hiddenFrom = BoxProps["hiddenFrom"];
