Polymorphic components
Some of the Mantine components (Button, Text, etc.) accept special component
prop that lets you
change the root element. This guide will explain how to correctly use them with HTML elements, custom components, Next.js Link and TypeScript.
With HTML elements
You can use any HTML element in component
prop. For example, a
tag will render an anchor:
With other components
You can also use polymorphic components with any other component. For example,
with react-router-dom
Link:
With Next.js Link
Next.js link does not work in the same way as other similar components in all Next.js version:
With TypeScript
Polymorphic components cannot infer ref and events correctly in some cases. When this happens – provide generic component type:
Create your own polymorphic components
You can create your own polymorphic components using createPolymorphicComponent
function
and Box component: