什么类型我应该传递给我的imageIcon道具在react typescript?

Question

我可以使用什么道具类型来代替这个any在我的imageIcon组件(我知道这是工作，但这不是很好的做法)。我使用typescript和react。我尝试了其他方法，包括字符串，但都不起作用

import React, { FC } from 'react';
import Grid from '../../hoc/layout/Grid';
import styles from './InfoBox.module.scss';
import { SvgIcon } from '@material-ui/core';
interface Props {
title: string;
imageIcon?: any;
userNumber: number;
content: string;
}
const InfoBox: FC<Props> = ({
title,
imageIcon,
userNumber,
content,
}: Props) => {
return (
<Grid xs={12} sm={6} md={4}>
<div className={styles.Boxheader}>
<div className={styles.ImageHolder}>
<SvgIcon component={imageIcon} />
</div>
<p className={styles.BoxheaderTitle}>{title}</p>
</div>
<div className={styles.Boxcontent}>
<p className={styles.Usernumber}>{userNumber}</p>
<p className={styles.BoxcontentText}>{content}</p>
</div>
</Grid>
);
};
export default InfoBox;

所以我可以把这个infoBox转发给其他组件:

import React, { FC } from 'react';
import Layout from '../../hoc/layout/Dashboard';
import InfoBox from '../../components/InfoBox';
import AccountBoxOutlinedIcon from '@material-ui/icons/AccountBoxOutlined';
const Settings: FC = () => {
return (
<Layout>
<InfoBox
title="Total Users"
userNumber={4456}
content="+22 in last week"
imageIcon={AccountBoxOutlinedIcon}
/>
<InfoBox
title="Total Users"
userNumber={4456}
content="+22 in last week"
/>
</Layout>
);
};
export default Settings;

Answer 1

可以导入SvgIconProps

import { SvgIconProps } from '@material-ui/core/SvgIcon';
interface Props {
title: string;
imageIcon?: SvgIconProps;
userNumber: number;
content: string;
}

Answer 2

使用typeof SvgIcon

import SvgIcon from "@material-ui/core/SvgIcon";
interface Props {
imageIcon?: typeof SvgIcon;
title?: string;
}

codesandbox中的示例