javascript - Masalah TypeScript Material-UI saat membuat ListItemButton bergaya dengan Link sebagai komponennya
Saya sedang mencoba membuat ListItemButton bergaya yang mengubah backgroundColor saat di-hover. Komponen ini akan digunakan dari beberapa komponen lain, itulah sebabnya saya melakukan ini. Masalahnya adalah ketika menggunakan NavigationListItemButton ini dengan Link dari react-router-dom sebagai komponen, pemeriksaan TS gagal. Bagaimana saya bisa melakukan ini dengan properti 'component' dan 'to'? Bantuan apapun akan sangat dihargai.
import { Theme, styled, alpha } from '@mui/material';
import ListItemButton from '@mui/material/ListItemButton';
const NavigationListItemButton = styled(ListItemButton)(
({ theme }: { theme?: Theme }) => ({
'&:hover': {
backgroundColor: alpha(theme.palette.secondary.main, 0.5),
},
}),
);
export default NavigationListItemButton;
import React from 'react';
import { Link } from 'react-router-dom';
import { ListItemText } from '@mui/material';
import NavigationListItemButton from '../NavigationListItemButton';
const OpsManagerListItem: React.FC<{ navigationOpen: boolean }> = ({
navigationOpen,
}) => {
return (
<NavigationListItemButton component={Link} to={'toHere'}>
<ListItemText primary={'Ops Manager'} />
</NavigationListItemButton>
);
};
export default React.memo(OpsManagerListItem);
Tipe '{ children: Element; component:
(props: LinkProps & RefAttributes) => ReactElement; to: string; }' tidak dapat ditetapkan ke tipe 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 lainnya ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 lainnya ... & { ...; }'. Properti 'component' tidak ada pada tipe 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 lainnya ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 lainnya ... & { ...; }'.ts(2322)
https://codesandbox.io/s/listitembutton-styled-dusbv?file=/src/OpsManagerListItem.tsx