我正在使用带有 Next.js 的 Material-UI。我想使用Material-UI Link component，以便我可以访问variant 和其他Material UI related API props。同时，我需要使用Next.js Link component进行页面之间的链接。
我想知道，我如何将它们两者结合使用，以便我可以获得 Next.js Link 组件的链接优势以及 MaterialUI 链接组件的样式优势。
理想情况下，我想创建自己的 Link 组件，将这两个组件组合到我的单个组件中，这样我就可以在项目中需要的任何地方使用它。
有什么想法吗？
【问题讨论】：
标签： javascript reactjs material-ui next.js
您可以使用 Next.js 包装 Material-UI 链接。这将提供同时使用两者的好处。
import NextLink from 'next/link'
import { Link as MUILink } from '@material-ui/core';
// ...
<NextLink href="/" passHref>
<MUILink variant="body2">Your Link</MUILink>
</NextLink>
【讨论】：
Link。
Link 接受结合了这两个属性的 component 属性。它与react-router 完美配合，也可能与netxjs Link 配合良好。
<Link component={NextjsLink}>Link Text</Link>
这里更改nextjs链接的导入名称。
【讨论】：
component 属性，因为看起来它没有被声明。这解决了问题（将组件属性添加到Buton.d.ts）：component?: Function;
【讨论】：
node_modules 文件夹中进行更改不是一个明智的决定，因为它不在 git 跟踪下，并且每次运行 npm i 或部署此项目时，它都会安装新包。
/** * Component property for Next Link */ component?: Function;