Material-UI: How to declare a type for React.ComponentType<P> with typescript

Question

I am using Typescript and Material-UI I want to declare the component type for a variable like this

import MoreVert from '@material-ui/icons/MoreVert'
import { SvgIconProps } from '@material-ui/core/SvgIcon';

let myIcon: SvgIconProps = <MoreVert />; // does not work

But I am getting the error:

[ts]
Type 'Element' is not assignable to type 'SvgIconProps'.
  Types of property 'type' are incompatible.
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string'.
      Type 'ComponentClass<any>' is not assignable to type 'string'.

This is how the SvgIcon.ts looks like. What am I doing wrong?

import * as React from 'react';
import { StandardProps, PropTypes } from '..';

export interface SvgIconProps
  extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
  color?: PropTypes.Color | 'action' | 'disabled' | 'error';
  component?: React.ReactType<SvgIconProps>;
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
  nativeColor?: string;
  titleAccess?: string;
  viewBox?: string;
}

export type SvgIconClassKey =
  | 'root'
  | 'colorSecondary'
  | 'colorAction'
  | 'colorDisabled'
  | 'colorError'
  | 'colorPrimary'
  | 'fontSizeInherit'
  | 'fontSizeSmall'
  | 'fontSizeLarge';

declare const SvgIcon: React.ComponentType<SvgIconProps>;

export default SvgIcon;

What are you trying to achieve? <MoreVert /> is a ReactNode type, has nothing to do with props, it's already applied. You might wanted something like myIcon = MoreVert without application — Ebuall
– Ebuall, Commented Sep 27, 2018 at 14:39
@Ebuall I am using typescript so I want to declare the type of it. — Murat Karagöz
– Murat Karagöz, Commented Sep 27, 2018 at 18:20
It just makes no sense. MoreVert already has type React.ComponentType<SvgIconProps>, <MoreVert /> has type Element, and has nothing in common with props, you already applied props at this point. — Ebuall
– Ebuall, Commented Sep 27, 2018 at 18:36

Murat Karagöz · Accepted Answer · 2018-10-01 10:30:37Z

17

Reference: https://www.typescriptlang.org/docs/handbook/jsx.html

By default the result of a JSX expression is typed as any. You can customize the type by specifying the JSX.Element interface. However, it is not possible to retrieve type information about the element, attributes or children of the JSX from this interface. It is a black box.

The reason why I lose all type information with JSX.Element is because it extends React.ReactElement<any> which has the type of any. To fix this I used it like this

 let myIcon: React.ReactElement<SvgIconProps> = <MoreVert />;

Now I have the element with all the type information.

answered Oct 1, 2018 at 10:30

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg K Over a year ago

The SvgIconProps interface can be imported via: import { SvgIconProps } from "@material-ui/core/SvgIcon";

Niuq · Accepted Answer · 2020-08-12 13:17:03Z

5

If anyone does not work by the way answered question of @Murat Karagöz you may try this when initializing an interface or a variable of an Icons from Material UI using TypeScript.

I got this working by declaring like this:

import ShowChartIconOutlined from '@material-ui/icons/ShowChartOutlined';
import { SvgIconProps } from '@material-ui/core';

type Menu = {
  id: number;
  icon: (props: SvgIconProps) => JSX.Element;
  label: string;
}[];

const NavBarMenus: Menu = [
  {
    id: 1,
    icon: ShowChartIconOutlined,
    label: 'Dashboard',
  },
...
];

Reference: [Docs & Types] Importing icons from @material-ui/icons in TypeScript #647

answered Aug 12, 2020 at 13:17

Niuq

3515 silver badges16 bronze badges

Comments

Matt McCutchen · Accepted Answer · 2018-09-28 17:12:30Z

2

As already briefly described by Ebuall in a comment, here's how you would declare the variable depending on whether you want the JSX element or the component type:

let myIconElement: JSX.Element = <MoreVert />;
let MyIconComponent: React.ComponentType<SvgIconProps> = MoreVert;

// Example component that uses the icon
function myComponent(props: {}) {
    return <>
        {myIconElement}
        {<MyIconComponent />}
    </>;
}

answered Sep 28, 2018 at 17:12

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Comments

Alexandre Annic · Accepted Answer · 2018-09-27 12:51:17Z

0

<MoreVert /> is a component.

SvgIconProps just define the list of props passed to this component.

You should try:

let myIcon: SvgIcon = <MoreVert />;

answered Sep 27, 2018 at 12:51

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

3 Comments

Murat Karagöz Over a year ago

I tried that but the ts compiler complains that he can not find SvgIcon even with the import import SvgIcon from '@material-ui/core/SvgIcon/SvgIcon';

Alexandre Annic Over a year ago

Wierd, because it's exported. So maybe React.ComponentType<SvgIconProps> ?

Murat Karagöz Over a year ago

I also tried that it will lead to

Type 'Element' provides no match for the signature '(props: SvgIconProps & { children?: ReactNode; }, context?: any): ReactElement<any>'.

Collectives™ on Stack Overflow

Material-UI: How to declare a type for React.ComponentType<P> with typescript

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related