材料 ui 图标的 React + Typescript 错误答案

【问题标题】：React + Typescript error for material ui icons材料 ui 图标的 React + Typescript 错误
【发布时间】：2020-09-06 04:28:51
【问题描述】：

我为 github 帮助页面中的图标定义了以下内容：

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

然后我在这里调用它：

<MaterialTable
      icons={tableIcons}

然而，我得到这个错误，任何帮助表示赞赏。当页面最初加载时，我可以看到图标，但随后它们消失了，我收到了这个错误。抱歉，代码块很大

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} />),

【问题讨论】：

试试这个：Add: forwardRef<SVGSVGElement, {}>((props, ref) => <AddBox {...props} ref={ref} />)
谢谢你的工作，你介意解释一下那里发生了什么吗？

标签： reactjs typescript material-ui

【解决方案1】：

我也有这个问题。如果您使用的是自定义 SVG 图标，请将其声明为 SVGIcon，而不仅仅是返回 <svg>{...}</svg>。

例如：

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;

这将帮助您摆脱错误，而无需在forwardRef 前面添加<SVGSVGElement, {}>。

【讨论】：

【解决方案2】：

我也偶然发现了这个问题......并在 GitHub 上发现了那个答案（它解决了那个确切的问题）： https://github.com/mbrn/material-table/issues/1004#issuecomment-525274793

基本上，您需要从material-table 导入Icons 类型并将其用作图标对象的类型：

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} />),
  // ...
};

【讨论】：