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

标签 javascript reactjs material-ui next.js

我正在使用带有 Next.js 的 Material-UI。我想使用 Material-UI Link component这样我就可以访问 variant和其他 Material UI related API props .同时,我需要使用Next.js Link component用于页面之间的链接。
我想知道,如何将它们两者结合使用,以便获得 Next.js Link 组件的链接优势以及 MaterialUI 链接组件的样式优势。
理想情况下,我想创建自己的 Link 组件,将它们组合成我的单个组件,以便我可以在项目中需要的任何地方使用它。
有任何想法吗?

最佳答案

您可以使用 Next.js 包装 Material UI 链接。这将提供同时使用两者的好处。

import NextLink from 'next/link'
import { Link as MUILink } from '@mui/material';

// ...

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

关于javascript - 将 Material UI Link 组件与 Next.JS Link 组件一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66226576/

相关文章:

javascript - 悬停时预取预呈现多个页面

javascript - 查询字符串与 react-router 路由不匹配的 URL

javascript - 尝试在我的 react 应用程序中使用链接但遇到问题

css - ReactJS 水平对齐 material-ui 元素

reactjs - 如何使用 Material-ui 为输入元素提供类似排版的样式?

reactjs - JSS 中的简单选择器和嵌套选择器

javascript - 为什么我的backbone.Collection只有一个元素? (使用 Require、TypeScript、Jasmine)

javascript - 从 HTML 片段导入 CSS 样式

javascript - 如何在 vue(js) 实例中使用 $(this) 捕获单击的元素

javascript - expo-video-player 出现问题,它会抛出错误 : setAudioModeAsync