材质 UI 图标的类型

Posted 2023-02-22

【中文标题】材质 UI 图标的类型

【英文标题】：type for material UI icons

【发布时间】：2021-02-09 19:14:55

【问题描述】：

我有一个如下所示的组件：

type IconButtonProps =  text: string ; onClick: () => void, icon: any;

export const IconButton: FunctionComponent<IconButtonProps> = (
  text,
  onClick,
  icon,
) => 
  const classes = useStyles();
  return (
    <Button className=classes.button 
    onClick=onClick
   >
     ' '
    icon
     text
   </Button>
  );
;

并且是这样调用的：

import SearchIcon from '@material-ui/icons/Search';

<IconButton text='Search' icon=<SearchIcon /> onClick=()=>SearchUsers()></IconButton>

在道具中，我使用any 作为图标的类型。使用什么类型的正确？我想避免使用任何类型。

【问题讨论】：

你是从哪里导入 SearchIcon 的？

@GuruparanGiritharan SearchIcon from '@material-ui/icons/Search';

为什么投反对票？

【参考方案1】：

也许import SvgIconComponent from "@material-ui/icons";

【讨论】：

那是一个组件，而不是一个类型？

它是一个类型github.com/mui-org/material-ui/blob/…

谢谢！这对我有用。对于 MUI V5，它是 import SvgIconComponent from "@mui/icons-material";

【参考方案2】：

这样使用

export const IconButton: FunctionComponent = (
  text,
  onClick,
  icon
) => 
  const classes = useStyles();
  return (
    <Button className=classes.button 
    onClick=onClick
   >
     ' '
    icon
     text
   </Button>
  );
;

【讨论】：

我已经询问了 Icon 的类型。我在打字稿中使用它，所以需要所有道具的类型。它已经起作用了。

这里不需要定义 IconButtonProps 图标类型