How to use Material-UI component inside .ts file?-CodePudding

I am writing some .ts file in mocks. How i need to input there mui element (Facebook icon, for example)

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

...

CodePudding user response：

okay, like this i suppose:

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


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

CodePudding user response：

You can describe the type of an icon as React.ReactNode :

type Link = {
  url: string;
  icon: React.ReactNode;
}

CodePudding user response：

React.ReactNode didn't helped since i am trying to use mui icon inside mui button.

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

with this i get an error on

Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.\n Type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }' is not assignable to type 'ReactNode'.\n