将MaterialUI链接组件与Next.JS链接组件一起使用

我在 Next.JS 中使用 Material-UI。我想使用Material-UI Link 组件，以便我可以访问variant和其他与 Material UI 相关的 API props。同时，我需要使用NextJS Link 组件进行页面之间的链接。

我想知道，我如何将它们两者一起使用，以便我可以获得 NextJS Link 组件的链接优势以及 MaterialUI 链接组件的样式优势。

理想情况下，我想创建我自己的 Link 组件，将它们中的两个组合到我的单个组件中，以便我可以在我的项目中的任何需要的地方使用它。

有任何想法吗？

谢谢。

回答

import NextLink from 'next/link'
import { Link as MUILink } from '@material-ui/core';

// ...

<NextLink href="/" passHref>
    <MUILink variant="body2">Your Link</MUILink>
</NextLink>