Reactjs 为什么不是'；当使用道具时，我不能在svg上工作吗？

我希望svg变为红色，但它与颜色#d8d8完全没有变化。我在svg中看到填充，如果我将其转换为参数，我可以使用它，但我更愿意使用React道具设置填充，以便通过css设置悬停：

svg代码（我从草图导出中获得）：

矩形

我的反应代码：

import { ReactComponent as Logo } from "../../assets/rect.svg";

export const Example = () => {
  return (
    <div>
      <Logo fill="#C94141" />
    </div>
  );
};

从“../../assets/rect.svg”导入{ReactComponent as Logo}”；
导出常量示例=（）=>{
返回(
);
};

我使用带有typescript模板的create react应用程序，徽标标识为类型：

---

React.FunctionComponent您需要将徽标创建为一个组件，并向其传递道具，以保持动态。尝试创建一个组件，如：

export default ({ fill = '#D8D8D8' }) => (
    <svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Rectangle</title>
        <g id="Design" stroke="none" stroke-width="1" fill-rule="evenodd">
            <g id="Mobile-Copy-6" transform="translate(-196.000000, -69.000000)" fill={fill}>
                <rect id="Rectangle" x="196" y="69" width="57" height="33"></rect>
            </g>
        </g>
    </svg>
);

导出默认值（{fill='#D8D8D8'}）=>(
矩形
);

然后简单地使用这个组件

import Logo from "../../components/logo.js";
export const Example = () => {
    return (
        <div>
            <Logo fill="#C94141" />
        </div>
    );
};

从“../../components/Logo.js”导入徽标；
导出常量示例=（）=>{
返回(
);
};
从
元素中删除
fill
属性。@ccprog-ahha，成功了！这就是我想要的答案，谢谢你。谢谢你的建议：）我的问题应该说得更清楚些；我想通过css设置属性，不幸的是这个解决方案并没有提供这样的功能。我在@ccprog的评论中找到了我的答案
import Logo from "../../components/logo.js";
export const Example = () => {
    return (
        <div>
            <Logo fill="#C94141" />
        </div>
    );
};