React MUI Slide组件搭配SVG图标不显示问题求助

问题根源 #

你代码里用<Box component="svg">嵌套img标签的方式存在冗余：这种结构会导致SVG容器没有正确的尺寸，Slide动画执行时只会渲染空容器，所以只显示白框，实际SVG内容无法正常加载显示。

解决方法 #

直接移除冗余的SVG容器，改用以下两种正确方式引入并显示SVG：

方式1：直接使用img标签（最简单）

去掉<Box component="svg">，直接用img标签加载SVG，同时指定明确宽高确保内容正常显示：

import { Paper, Slide, Box, Button } from '@material-ui/core';
import { useState } from 'react';
import OfficeWorker from './OfficeWorker.svg';

const TestButtons = () => {
  const [buyButtonClicked, setBuyButtonClicked] = useState(false);

  const onBuyNow = () => {
    setBuyButtonClicked(true);
  };

  const OfficeWorkerIcon = (
    <Paper elevation={4} style={{ padding: 8 }}>
      <img src={OfficeWorker} alt="Office Worker" width={100} height={100} />
    </Paper>
  );

  return (
    <Box>
      <Box marginRight={3} display="flex" gap={2}>
        <Button onClick={onBuyNow}>Buy it now</Button>
        <Button>Questions? Give us a call!</Button>
      </Box>

      <Slide direction="right" in={buyButtonClicked} mountOnEnter unmountOnExit>
        {OfficeWorkerIcon}
      </Slide>
    </Box>
  );
};

export default TestButtons;

方式2：将SVG作为React组件导入（更灵活）

如果你的项目支持（比如Create React App默认支持），可以直接把SVG当作React组件导入，通过props控制尺寸、颜色等属性：

import { Paper, Slide, Box, Button } from '@material-ui/core';
import { useState } from 'react';
// 直接导入SVG为React组件
import OfficeWorker from './OfficeWorker.svg';

const TestButtons = () => {
  const [buyButtonClicked, setBuyButtonClicked] = useState(false);

  const onBuyNow = () => {
    setBuyButtonClicked(true);
  };

  const OfficeWorkerIcon = (
    <Paper elevation={4} style={{ padding: 8 }}>
      <OfficeWorker width={100} height={100} />
    </Paper>
  );

  return (
    <Box>
      <Box marginRight={3} display="flex" gap={2}>
        <Button onClick={onBuyNow}>Buy it now</Button>
        <Button>Questions? Give us a call!</Button>
      </Box>

      <Slide direction="right" in={buyButtonClicked} mountOnEnter unmountOnExit>
        {OfficeWorkerIcon}
      </Slide>
    </Box>
  );
};

export default TestButtons;

额外注意事项 #

• 确认SVG文件路径正确，无拼写错误
• 给Paper组件添加padding可避免SVG紧贴边框，提升视觉效果
• 若为自定义webpack配置，需配置@svgr/webpack或类似loader才能将SVG作为组件导入

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