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>
);
}