将 Material UI Link 组件与 Next.JS Link 组件一起使用

Posted 2023-02-22

【中文标题】将 Material UI Link 组件与 Next.JS Link 组件一起使用

【英文标题】：Using the Material UI Link component with the Next.JS Link Component

【发布时间】：2021-05-19 10:25:45

【问题描述】：

我正在使用带有 Next.js 的 Material-UI。我想使用Material-UI Link component，以便我可以访问variant 和其他Material UI related API props。同时，我需要使用Next.js Link component进行页面之间的链接。

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

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

有什么想法吗？

【参考方案1】：

您可以使用 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>

【讨论】：

谢谢——这看起来不错。这样做和 Rajiv 的解决方案有什么区别：***.com/a/66227329/7477670？

我猜有这个位：material-ui.com/guides/composition/#caveat-with-refs。如果您使用这种方法，您可能需要将 ref 转发功能添加到 Next.js Link。

【参考方案2】：

Link 接受结合了这两个属性的 component 属性。它与react-router 完美配合，也可能与netxjs Link 配合良好。

<Link component=NextjsLink>Link Text</Link>

这里更改nextjs链接的导入名称。

Related Material-ui Documentation

【讨论】：

所以，如果我理解正确的话——上面的代码既可以作为 Material-UI Link 组件，又可以作为 NextJS Link 组件（这意味着我可以使用所有道具和其他相关行为。

我猜是这样。但我不确定，因为我没有使用过 nextjs，但我已经使用了这个方法 react-router 很多，它在那里工作得很好。试一试..

Material UI 中的 Button 组件有同样的问题。它不接受 component 属性，因为看起来它没有被声明。这解决了问题（将组件属性添加到Buton.d.ts）：component?: Function;

【参考方案3】：

Material UI 的 Button 组件也有同样的问题。它不接受 component 属性，因为看起来它没有被声明。这解决了问题（将组件属性添加到Buton.d.ts）：component?: Function;

这里是解决方案：

并且没有错误了：

【讨论】：

在node_modules 文件夹中进行更改不是一个明智的决定，因为它不在 git 跟踪下，并且每次运行 npm i 或部署此项目时，它都会安装新包。

@Rajiv 是的 - 这是真的。但是另一种解决方案可能是什么。也许在 Material UI github 上创建一个问题？

复制粘贴sn-p：/** * Component property for Next Link */ component?: Function;