reactjs - React + Typescript-feil for Material UI-ikoner

Jeg definerte følgende for ikonene fra en GitHub-hjelpeside:

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

Og så kaller jeg det her:

<MaterialTable
      icons={tableIcons}

Jeg får imidlertid denne feilen, all hjelp er verdsatt. Når siden først lastes, kan jeg se ikonene, men så forsvinner de og jeg får denne feilen. Beklager for den store kodeblokken

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

Svar #1

Jeg hadde dette problemet også. Hvis du bruker et tilpasset SVG-ikon, bør du erklære det som et SVGIcon i stedet for bare å returnere <svg>{...}</svg>.

For eksempel:

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;

Dette vil hjelpe deg med å bli kvitt feilen uten å legge til <SVGSVGElement, {}> foran forwardRef.

Svar #2

Jeg snublet over det problemet også... og oppdaget det svaret (som løste det eksakte problemet) på GitHub: https://github.com/mbrn/material-table/issues/1004#issuecomment-525274793

I hovedsak må du importere Icons-typen fra material-table og bruke den som typen til ikon-objektet ditt:

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

Relaterte artikler