CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
new_hello_world
new_hello_world

Reputation: 93

React + Typescript error for material ui icons

I defined the following for the icons from a github help page:

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};

And then i call it here:

<MaterialTable
      icons={tableIcons}

However I get this error, any help is appreciated. When the page initially loads, I can see the icons but then they dissapear and I get this error. Sorry for the large block of code

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: "inherit" | "disabled" | "action" | "primary" | "secondary" | "error" | undefined; fontSize?: "small" | ... 3 more ... | undefined; htmlColor?: string | undefined; shapeRendering?: string | undefined; titleAccess?: string | undefined; viewBox?: string | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ ref: ((instance: unknown) => void) | MutableRefObject<unknown> | null; children?: ReactNode; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '((instance: unknown) => void) | MutableRefObject<unknown> | null' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
      Type 'MutableRefObject<unknown>' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
        Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<SVGSVGElement>'.
          Types of property 'current' are incompatible.
            Type 'unknown' is not assignable to type 'SVGSVGElement | null'.
              Type 'unknown' is not assignable to type 'SVGSVGElement'.  TS2769

    21 | 
    22 | const tableIcons = {
  > 23 |   Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
       |                                     ^
    24 |   Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    25 |   Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    26 |   Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),

Upvotes: 4

Views: 7115

Answers (2)

zeropaper
zeropaper

Reputation: 584

I stumbled upon that issue as well... and discovered that answer (which solved that exact problem) on GitHub: https://github.com/mbrn/material-table/issues/1004#issuecomment-525274793

Basically, you need to import the Icons type from material-table and use it as the type of your icons object:

import * as React from "react";
import { Icons } from 'material-table';
import {
  AddBox,
  // ...
} from "@material-ui/icons";

const tableIcons: Icons = {
  Add: React.forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  // ...
};

Upvotes: 2

Bassem
Bassem

Reputation: 4050

I had this issue too. If you're using a custom SVG icon, declare it as an SVGIcon instead of just returning the <svg>{...}</svg>.

For example:

import * as React from "react";
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";

const CustomIcon: React.FC<SvgIconProps> = (props) => {
    return (
        <SvgIcon {...props}>
            <path {...} />
        </SvgIcon>
    );
};

export default CustomIcon;

This will help you get rid of the error without adding <SVGSVGElement, {}> in front of the forwardRef.

Upvotes: 2

Related Questions