如何将MUI图标组件作为Props传递给另一个React组件？

实现方法很简单，分两步修改代码即可：

• 第一步：让SideBarIcon组件接收图标组件作为Props
  修改SideBarIcon组件，添加一个Icon属性作为入参，同时给它设置默认值（比如原来的AddIcon），这样不传图标时依然有默认图标可用。然后在组件内部渲染这个传入的Icon组件。

• 第二步：在调用SideBarIcon时传入目标图标
  在SideBarPanel里，给第二个SideBarIcon传入Icon={ExpandMoreIcon}，就能把指定图标传递过去。

修改后的完整代码如下：

import React from "react";
import "./SideBarPanel.css";
import AddIcon from "@mui/icons-material/Add";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

// 接收Icon props，默认值为AddIcon
const SideBarIcon = ({ Icon = AddIcon }) => {
  return (
    <div className="sidebar-icon group">
      <Icon />
    </div>
  );
};

const SideBarPanel = () => {
  return (
    <div className="sidebar-icons">
      {/* 使用默认图标 */}
      <SideBarIcon />
      {/* 传入ExpandMoreIcon */}
      <SideBarIcon Icon={ExpandMoreIcon} />
    </div>
  );
};

export default SideBarPanel;

注：原代码中SideBarIcon的div使用了class，React中需替换为className，已在上述代码中修正。

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