0
712
ViewsUsing the Material UI Link component with the Next.JS Link Component
I am using Material-UI with Next.js. I would like to use the Material-UI Link component so that I can access to the variant and other Material UI related API props. At the same time, I need to use the Next.js Link component for linking between pages.
I am wondering, how do I use the two of them together so that I can get the linking benefits of the Next.js Link component along with the styling benefits of the MaterialUI link component.
Ideally, I'd like to create my own Link component that combines the two of them into my single component so that I can use it anywhere I need to within my project.
Any ideas?
4 answers
Answer question0
Link accepts a component prop that combines both properties. It works perfectly with react-router, might also work well with netxjs Link.
<Link component={NextjsLink}>Link Text</Link>
Here change the import name of the nextjs link.
0
You can wrap the Material-UI link with the Next.js one. This will provide the benefits of using both.
import NextLink from 'next/link'
import { Link as MUILink } from '@material-ui/core';
// ...
<NextLink href="/" passHref>
<MUILink variant="body2">Your Link</MUILink>
</NextLink>
0
Had the same problem with the Button component from Material UI. It was not accepting component property because looks like it was not declared. This solved the issue (added component property to the Buton.d.ts): component?: Function;
Here the solution: 
and boom no error anymore:
0
I found these suggestions cause more issues than they solve. My solution has been to use the components, specifically in my case as a replacement for NavLinks.
<ListItemButton component="a" selected={test = true ? true : false} />
Label
</ListItemButton>
It actually sets the href on the tag.