如何在.ts文件中使用Material-UI组件?

Question

我正在用mock编写一些.ts文件。我需要如何输入那里的多元素(Facebook图标，例如)

export const links: Link[] = [
{
url: "https://uk-ua.facebook.com/",
**icon: <Facebook fontSize="large"/>,**
},
...

Answer 1

ReactNode没有帮助，因为我试图在mui按钮内使用mui图标。

interface Link {
url: string;
icon: SvgIconComponent;
}

const socialLinks: Array<Link> = [
{
url: "https://uk-ua.facebook.com/",
icon: Facebook,
},
{
url: "https://www.linkedin.com/",
icon: LinkedIn,
},
{
url: "https://github.com/kerrimov/what-to-watch",
icon: GitHub,
},
];
const Social = () => {

return (
<Box>
{socialLinks.map((link, index) => (
<Button color="inherit" href={link.url} key={index}>{link.icon}</Button>
))} 
</Box>
);
};

我在 上得到一个错误重载1 of 3， '(props: {href: string;},{孩子吗?: ReactNode;课吗?: Partial | undefined;颜色吗?:";inherit"|"primary"|"secondary"|"success"|"error"|"info"|"warning"|未定义;…9 . more…变体?:";text"|……再……|未定义;},Omit<……比;,CommonProps,省略<…>): Element'，给出以下错误。n Type 'OverridableComponent<{}，>>,{muiName:字符串;}'不能分配给'ReactNode'类型。n

Answer 2

我终于明白了。

export const SECTIONS: ISection[] = [
{
LinkTo: Section.Type1,
Icon: AccessibilityNewOutlinedIcon,
Text: "Text 1",
},
{
LinkTo: Section.Type2,
Icon: GroupOutlinedIcon,
Text: "Text 2",
},
];

对于渲染部件，在component中:

{SECTIONS.map((section, s) => (
<MenuItem key={s} onClick={() => navigateTo(section.LinkTo)}>
<ListItemIcon>
{React.createElement(section.Icon)}
</ListItemIcon>
<ListItemText>{section.Text}</ListItemText>
</MenuItem>
))}

这解决了我的问题，希望你的也是。

Answer 3

好的，我想是这样的:

export const links: Link[] = [
{
url: "https://uk-ua.facebook.com/",
icon: Facebook,
},

export interface Link {
url: string;
icon: OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; };
}