React跨组件使用MUI图标出现渲染不全、样式无法内置问题

两个问题的核心根源是MUI图标组件用法错误：

• @mui/icons-material 导出的图标（比如示例里的Home）本身就是可独立渲染的完整组件，不需要额外套@mui/material的<Icon />组件包裹。两层图标组件嵌套会导致内部SVG的宽高、viewBox样式规则冲突，直接出现图标裁切、仅显示一半的问题。
• 父组件传参时直接传入了实例化完成的JSX元素<Home style={{ fontSize: "2rem" }} />，样式已经绑定在这个现成的元素实例上，子组件拿到的是已经构造好的渲染内容，自然没法在子组件层统一控制图标样式。

推荐使用传组件引用+子组件统一管控样式的写法，一次性解决两个问题：

1. 调整父组件（Sidebar.comp.js） #

不要提前实例化图标、不要提前绑定内联样式，直接把图标组件本身作为参数传递给子组件：

import React from "react";
import twitterLogo from "../../images/twitter_logo.png";

import { Home } from "@mui/icons-material";
import { Link } from "react-router-dom";
import SidebarOption from "./SidebarOption.comp";

function Sidebar() {
  return (
    <div className="px-4 py-2 ">
      <div className="rounded-full transition-color cursor-pointer hover:bg-blue-100 px-2 py-3 w-max">
        <Link to="/home">
          <img src={twitterLogo} alt="twitter_logo" className="h-7" />
        </Link>
      </div>
      {/* 直接传组件引用，不要写成<Home />的JSX实例形式 */}
      <SidebarOption
        MuiIcon={Home}
        path="/home"
      />
    </div>
  );
}

export default Sidebar;

2. 调整子组件（SidebarOption.comp.js） #

删掉多余的<Icon />包裹层，直接渲染传入的图标组件，把通用统一样式写在子组件中即可：

import React from "react";

// 移除不需要的Icon组件引入
import { Link } from "react-router-dom";

function SidebarOptions({ MuiIcon, path }) {
  return (
    <div className="rounded-full transition-color cursor-pointer hover:bg-gray-300 p-[7px] w-max h-max">
      <Link to={path}>
        {/* 直接渲染传入的图标组件，所有图标的通用样式统一在这里控制 */}
        <MuiIcon sx={{ fontSize: "2rem" }} />
        {/* 如果用Tailwind控制样式，也可以写成：
        <MuiIcon className="text-[2rem]" />
        */}
      </Link>
    </div>
  );
}

export default SidebarOptions;

如果有个别图标需要单独设置特殊样式，也可以继续在父组件传JSX实例，但子组件必须删掉<Icon />包裹层，直接渲染传入内容即可：

// 子组件对应渲染部分写法
<Link to={path}>
  {MuiIcon}
</Link>

这种写法下样式需要在父组件传参时逐个配置，仅适合存在差异化样式需求的少量图标场景。

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