reactjs - Material ui 图标的 React + Typescript 错误

Question

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

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

这将帮助您在不添加 <SVGSVGElement, {}> 的情况下摆脱错误。前面forwardRef .