new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

polymorphic/overview

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Polymorphic component definition and component prop

A polymorphic component is a component whose root element can be changed with the component prop. All polymorphic components have a default element that is used when the component prop is not provided. For example, the Button component's default element is button and it can be changed to a or any other element or component.

Polymorphic components performance overhead

Polymorphic components have a performance overhead for tsserver with no impact on runtime performance. Because of this, not all Mantine components have polymorphic types, but all components still accept the component prop to change the root element.

Polymorphic component with react-router Link

Example of passing the Link component from react-router-dom to the component prop: ```tsx import { Link } from 'react-router-dom'; import { Button } from '@mantine/core'; function Demo() { return ( <Button component={Link} to="/react-router"> React router link </Button> ); } ```

Polymorphic component with Next.js Link 12 and below

With Next.js 12 and below, Next.js Link does not work with the component prop the same way as other similar components. The Next.js Link component must wrap the Mantine component: ```tsx import Link from 'next/link'; import { Button } from '@mantine/core'; function Demo() { return ( <Link href="/hello" passHref> <Button component="a">Next link button</Button> </Link> ); } ```

Polymorphic component with Next.js Link 13 and above

With Next.js 13 and above, Next.js Link works the same as other similar components: ```tsx import Link from 'next/link'; import { Button } from '@mantine/core'; function Demo() { return ( <Button component={Link} href="/hello"> Next link button </Button> ); } ```

Give your agent this brain