Material UI中IconButton的TypeScript类型及侧边栏组件参数类型咨询

一、侧边栏项组件的类型修正与代码优化 #

你的代码存在两处需要调整的地方：React组件的参数规范，以及Icon参数的类型定义。以下是两种可行的实现方式：

方式1：传入已渲染的Icon元素 #

如果调用时传入<MailIcon />这类已创建的React元素，Icon参数的类型应设为React.ReactNode，同时将组件改为接收props对象的标准写法：

import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import React from "react";

// 定义组件props类型
type SidebarItemProps = {
  text: string;
  icon: React.ReactNode;
};

const SidebarItem = ({ text, icon }: SidebarItemProps) => {
  return (
    <ListItem key={text} disablePadding>
      <ListItemButton>
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={text} />
      </ListItemButton>
    </ListItem>
  );
};

// 侧边栏组件调用示例
const LeftSidebar = () => {
  return (
    <List>
      <SidebarItem text="收件箱" icon={<InboxIcon />} />
      <SidebarItem text="邮件" icon={<MailIcon />} />
    </List>
  );
};

export default LeftSidebar;

方式2：传入Icon组件本身 #

如果希望传入MailIcon组件类本身（在SidebarItem内部渲染），则Icon参数的类型应设为React.ElementType：

import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import React from "react";

type SidebarItemProps = {
  text: string;
  icon: React.ElementType;
};

const SidebarItem = ({ text, icon: Icon }: SidebarItemProps) => {
  return (
    <ListItem key={text} disablePadding>
      <ListItemButton>
        <ListItemIcon><Icon /></ListItemIcon>
        <ListItemText primary={text} />
      </ListItemButton>
    </ListItem>
  );
};

// 侧边栏组件调用示例
const LeftSidebar = () => {
  return (
    <List>
      <SidebarItem text="收件箱" icon={InboxIcon} />
      <SidebarItem text="邮件" icon={MailIcon} />
    </List>
  );
};

export default LeftSidebar;

二、Material UI IconButton的TypeScript类型 #

1. Props类型 #

如果需要定义接收IconButton属性的组件，导入IconButtonProps即可：

import { IconButton, IconButtonProps } from "@mui/material";

// 自定义IconButton组件
const CustomIconButton = (props: IconButtonProps) => {
  return <IconButton {...props} />;
};

2. 组件本身的类型 #

如果需要获取IconButton组件的类型，使用typeof IconButton：

import { IconButton } from "@mui/material";

const MyIconButton: typeof IconButton = IconButton;

内容的提问来源于stack exchange，提问作者Hyrule_h_f