将图标添加到项目材料表错误

问题描述

我尝试这样做https://github.com/mbrn/material-table，但出现错误。我认为有问题，因为我使用TSX而不是JSX吗？你知道如何解决吗？

No overload matches this call.
  Overload 1 of 2,'(props: { component: ElementType<any>; } & { children?: ReactNode; color?: "primary" | "secondary" | "disabled" | "error" | "inherit" | "action" | undefined; fontSize?: "inherit" | ... 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>'.ts(2769)
OverridableComponent.d.ts(17,7): 'component' is declared here.

在这里

No overload matches this call.
  Overload 1 of 2,'(props: Readonly<MaterialTableProps<{ name: string; surname: string; birthYear: number; birthCity: number; }>>): MaterialTable<{ name: string; surname: string; birthYear: number; birthCity: number; }>',gave the following error.
    Type '{ Add: React.ForwardRefExoticComponent<React.RefAttributes<unkNown>>; Check: React.ForwardRefExoticComponent<React.RefAttributes<unkNown>>; Clear: React.ForwardRefExoticComponent<React.RefAttributes<unkNown>>; ... 13 more ...; ViewColumn: React.ForwardRefExoticComponent<...>; }' is not assignable to type 'Icons'.
      The types of 'Add.defaultProps' are incompatible between these types.
        Type 'Partial<RefAttributes<unkNown>> | undefined' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>> | undefined'.
          Type 'Partial<RefAttributes<unkNown>>' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>>'.
            Types of property 'ref' are incompatible.
              Type '((instance: unkNown) => void) | RefObject<unkNown> | null | undefined' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.

解决方法

尝试

forwardRef<SVGSVGElement>

在图标中 或

导入这样的图标：

import MaterialTable,{ Icons } from 'material-table'
const tableIcons: Icons = {...}