Polymorphic components
Some of the Mantine components (Button, Text, etc.) accept special component
prop that lets you
change to root element. This guide will explain
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 the say way as other similar components, you will need to either
wrap your component with it or use NextLink
component exported from @mantine/next
package:
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: