[英]React + Typescript error for material ui icons
I defined the following for the icons from a github help page:我为 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} />),
};
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} />),
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>
.如果您使用的是自定义 SVG 图标,请将其声明为 SVGIcon 而不是仅返回<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
.这将帮助您摆脱错误,而无需在forwardRef
前面添加<SVGSVGElement, {}>
。
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我也偶然发现了这个问题......并在 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:基本上,您需要从material-table
中导入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} />),
// ...
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.