I have code that is not compiling in typescript
<IconButton
activeClassName="Mui-active"
component={RouterLink}
onClick={closeSidebar}
to={link}
>
<Button
disableRipple
activeClassName="Mui-active"
component={RouterLink}
onClick={closeSidebar}
to={link}
startIcon={Icon && <Icon />}
>
I am not quite sure how to port both of these? At least I am guessing the theme I am copying from is on a previous version of MUI. The IconButton and Button come from a file in node_module @mui/material directory.
I am not quite sure how to upgrade so activeClassName is working?
Here is the exact compile error ->
TS2769: No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "warning" | "success" | "info" | "error" | "primary" | "secondary"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
Type '{ children: any[]; disableRipple: true; activeClassName: string; component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; onClick: () => void; to: string; startIcon: Element; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "warning" | ... 4 more ... | "secondary"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & Omit<...> & CommonProps & Omit<...>'.
Property 'activeClassName' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "warning" | ... 4 more ... | "secondary"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & Omit<...> & CommonProps & Omit<...>'.
Overload 2 of 3, '(props: { component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; } & { ...; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
Type '{ children: any[]; disableRipple: true; activeClassName: string; component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; onClick: () => void; to: string; startIcon: Element; }' is not assignable to type 'IntrinsicAttributes & { component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; } & { ...; } & Omit<...> & CommonProps & Omit<...>'.
Property 'activeClassName' does not exist on type 'IntrinsicAttributes & { component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; } & { ...; } & Omit<...> & CommonProps & Omit<...>'.
Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
Type '{ children: any[]; disableRipple: true; activeClassName: string; component: ForwardRefExoticComponent<NavLinkProps & RefAttributes<HTMLAnchorElement>>; onClick: () => void; to: string; startIcon: Element; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "warning" | "success" | "info" | "error" | "primary" | "secondary"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & Omit<...> & CommonProps & Omit<...>'.
Property 'activeClassName' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses>; color?: "inherit" | "warning" | "success" | "info" | "error" | "primary" | "secondary"; ... 9 more ...; variant?: "text" | ... 1 more ... | "contained"; } & Omit<...> & CommonProps & Omit<...>'.
101 | <Button
102 | disableRipple
> 103 | activeClassName="Mui-active"
| ^^^^^^^^^^^^^^^
104 | component={RouterLink}
105 | onClick={closeSidebar}
106 | to={link}