How to type a button with react-router-dom Link in MUI v5

Question

Problem

I am migrating from MUI v4 to v5 and I am having an issue using the styled function to style a Button component. For some reason, when I use MyButton instead of Button, the compiler has an issue with the component prop.

Error Message

Type '{ children: string; component: <S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | JSXElementConstructor<any>> | null; to: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & ... 5 more ... & { ...; }'.
  Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & ... 5 more ... & { ...; }'.

My Code

import { alpha, Button, styled } from "@mui/material";
import React from "react";
import { Link, HashRouter as Router } from 'react-router-dom';
import "./styles.css";

export default function App() {

  const MyButton = styled(Button)(({ theme }) => ({
    color: 'white',
    margin: theme.spacing(1),
    backgroundColor: alpha(theme.palette.common.white, 0.25),
    '&:hover': {
      backgroundColor: alpha(theme.palette.common.white, 0.35),
    },
  }));

  return (
    <Router basename="/">
      <div className="App">
        <MyButton component={Link} to="/"> // why doesn't this work?
          My Button
        </MyButton>
      </div>
    </Router>
  );
}

CodeSandBox

CodeSandbox Link Here

score 3 · Accepted Answer · answered Oct 03 '21 at 04:05

3

You're missing the props type definition of the Link component. To fix it, install @types/react-router-dom package and declare your HOC props type when using styled like this:

import { Link, HashRouter as Router, LinkProps } from "react-router-dom";

const MyButton = styled(Button)<LinkProps>(({ theme }) => ({
  // your link styles
}));

<MyButton component={Link} to="/route">
  My Button
</MyButton>

Live Demo

answered Oct 03 '21 at 04:05

NearHuscarl

66,950
18
261
230

Unfortunately, this doesn't work anymore with recent dependency updates; see CodeSandbox here: https://codesandbox.io/s/69420620-how-to-style-a-button-with-react-router-dom-link-in-mui-v5-component-prop-problem-6pfvjn?file=/src/App.tsx – TheDiveO Mar 01 '23 at 13:43
As of react router dom 6 `@types/react-router-dom` must not be installed anymore, as the types are now integrated and the last separate type package is 5.x. – TheDiveO Mar 01 '23 at 17:37

score 1 · Answer 2 · answered Jan 19 '22 at 00:43

1

This seem to work for me

import { Link as RouterLink } from 'react-router-dom';
import { Link} from '@mui/material';

...

<Link 
    to={slug}
    component={RouterLink}
    variant="button"
    color="secondary"
    >
Read More
</Link>

answered Jan 19 '22 at 00:43

atazmin

4,757
1
32
23