0
158
VisualizaçõesUso del componente Material UI Link con el componente Next.JS Link
Estoy usando Material-UI con Next.js. Me gustaría usar el componente Material-UI Link para poder acceder a la variant y otros accesorios de API relacionados con Material UI . Al mismo tiempo, necesito usar el componente Link de Next.js para vincular entre páginas.
Me pregunto cómo uso los dos juntos para poder obtener los beneficios de enlace del componente de enlace Next.js junto con los beneficios de estilo del componente de enlace MaterialUI.
Idealmente, me gustaría crear mi propio componente Link que combine los dos en mi único componente para poder usarlo en cualquier lugar que necesite dentro de mi proyecto.
¿Algunas ideas?
4 Respostas
Responde à pergunta0
Link acepta un accesorio de component que combina ambas propiedades. Funciona perfectamente con react-router , también podría funcionar bien con netxjs Link .
<Link component={NextjsLink}>Link Text</Link>Aquí cambie el nombre de importación del enlace nextjs.
0
Puede envolver el enlace Material-UI con el de Next.js. Esto proporcionará los beneficios de usar ambos.
import NextLink from 'next/link' import { Link as MUILink } from '@material-ui/core'; // ... <NextLink href="/" passHref> <MUILink variant="body2">Your Link</MUILink> </NextLink>0
Tuve el mismo problema con el componente Button de Material UI . No aceptaba la propiedad component porque parece que no se declaró. Esto resolvió el problema (agregó la propiedad del componente a Buton.d.ts ): component?: Function;
Aquí la solución: 
y boom ya no hay error:
0
Descubrí que estas sugerencias causan más problemas de los que resuelven. Mi solución ha sido utilizar los componentes, concretamente en mi caso como recambio de NavLinks.
<ListItemButton component="a" selected={test = true ? true : false} /> Label </ListItemButton>En realidad, establece el href en la etiqueta.