Configure MUI LinkBehaviour for next/link

zetkin · Jul 23, 2024 · cae741e · cae741e
1 parent eefd6a7
commit cae741e
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/webapp/src/theme.ts → webapp/src/theme.tsx b/webapp/src/theme.ts → webapp/src/theme.tsx
@@ -1,14 +1,23 @@
 'use client';
 
 import { Roboto } from 'next/font/google';
+import NextLink from 'next/link';
 import { createTheme } from '@mui/material/styles';
+import { ForwardedRef, forwardRef } from 'react';
 
 const roboto = Roboto({
   display: 'swap',
   subsets: ['latin'],
   weight: ['300', '400', '500', '700'],
 });
 
+const LinkBehaviour = forwardRef(function LinkBehaviour(
+  props: { href: string },
+  ref: ForwardedRef<HTMLAnchorElement>,
+) {
+  return <NextLink ref={ref} {...props} />;
+});
+
 const theme = createTheme({
   components: {
     MuiBreadcrumbs: {
@@ -19,6 +28,11 @@ const theme = createTheme({
         }),
       },
     },
+    MuiButton: {
+      defaultProps: {
+        LinkComponent: LinkBehaviour,
+      },
+    },
     MuiLinearProgress: {
       styleOverrides: {
         root: () => ({
@@ -29,6 +43,11 @@ const theme = createTheme({
         }),
       },
     },
+    MuiLink: {
+      defaultProps: {
+        component: LinkBehaviour,
+      },
+    },
   },
 
   typography: {