如何在React自定义组件中将Material UI图标作为prop传递

问题原因 #

你传入的OptionIcon是MUI的图标组件实例，而@mui/material/Icon组件仅用于渲染Material Icons字体图标，需要传入图标对应的字符串名称，将组件直接作为子元素传入Icon自然无法正常渲染。

解决方案 #

有两种常用修复方式：

方式1：直接渲染传入的图标组件（更推荐） #

修改HeaderMenuOptions组件代码，不需要嵌套Icon组件，直接将传入的OptionIcon作为自定义组件渲染即可，同时补充未传图标时的兼容逻辑：

import Icon from "@mui/material/Icon";

function HeaderMenuOptions({ optionText, OptionIcon }) {
  return (
    <div className="flex items-center text-center">
      {/* 存在图标时直接渲染组件 */}
      {OptionIcon && <OptionIcon />}
      <h1 className="py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer">
        {optionText}
      </h1>
    </div>
  );
}

export default HeaderMenuOptions;

原有组件调用方式不需要修改，传入图标组件的写法保持不变即可。

方式2：传入图标字符串名称适配Icon组件 #

如果你需要保留Icon组件的封装，调用组件时不需要传入图标组件，改为传入对应图标的字符串名称：

// 调用组件时传字符串
<HeaderMenuOptions optionText="Premium" OptionIcon="security" />

原有组件代码不需要修改即可正常渲染。

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