CODEWITHSUNDEEP
typescriptmaterial-ui
Oleg Kuchma
Oleg Kuchma

Reputation: 11

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

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"/>,**
    },

...

Upvotes: 0

Views: 516

Answers (3)

fwf
fwf

Reputation: 33

Finally, I got it.

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

And for rendering part, in component:

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

That solved my problem, hopefully yours too.

Upvotes: 1

Oleg Kuchma
Oleg Kuchma

Reputation: 11

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

Upvotes: 1

Oleg Kuchma
Oleg Kuchma

Reputation: 11

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

Upvotes: 0

Related Questions