[英]type for material UI icons
我有一个看起来像这样的组件:
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
作为图标的类型。 要使用的正确类型是什么? 我想避免使用任何类型。
如果您使用材质图标作为道具,则可以将类型声明为
icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
它是材质 UI 提供的材质图标类型的默认值。
所以你可以将你的类型声明为
type IconButtonProps = { text: string ; onClick: () => void, icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;};
也许import { SvgIconComponent } from "@material-ui/icons";
用这种方式
export const IconButton: FunctionComponent = ({
text,
onClick,
icon
}) => {
const classes = useStyles();
return (
<Button className={classes.button}
onClick={onClick}
>
{' '}
{icon}
{text}
</Button>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.