A polymorphic component is a component which root element can be changed with
All polymorphic components have a default element which is used when
component prop is not provided.
For example, the Button component default element is
it can be changed to
a or any other element or component:
You can pass any other React component to
For example, you can pass
Link component from
Next.js link does not work in the same way as other similar components in all Next.js versions.
With Next.js 12 and below:
With Next.js 13 and above:
Non-polymorphic components include
React.ComponentPropsWithoutRef<'x'> as a part of their props type,
x is a root element of the component. For example, Container component
is not polymorphic – its root element is always
div, so its props type includes
Polymorphic components do not include
React.ComponentPropsWithoutRef<'x'> as a part of their props type
because their root element can be changed, and thus props type can be inferred only after the component was rendered.
Example of creating a non-polymorphic wrapper component for Mantine polymorphic component:
Example of creating a polymorphic wrapper component for Mantine polymorphic component:
You can use dynamic value in the
component prop, but in this case, you need to either provide types manually
or disable type checking by passing
any as a type argument to the polymorphic component:
createPolymorphicComponent function and Box component to create new polymorphic components:
Polymorphic components have performance overhead for tsserver (no impact on runtime performance),
because of that not all Mantine components have polymorphic types, but all components still
component prop – root element can be changed.
To make Mantine component polymorphic, use
createPolymorphicComponent function the same way
as in the previous example: