React material-UI：无法通过道具颜色在 svg 上“填充”或使用“boxShadow”

Question

意图：

• 我想将不同的颜色传递给我的组件，我们需要通过它fill svg（在 SVG 的内部）；
• 这种填充也可以通过 boxShadow inset 来实现……但如果作为 prop 传递，那也不起作用

问题：

• SVG 中的 fill 如果您在其中放置一个值，则效果很好（取消注释下面代码中我放置 lightblue 的第 35 行）

fill: 'lightblue'

• fill 不适用于传递的道具颜色...请注意，描边、阴影和其他所有 css 似乎都可以正常工作...只有填充无效

'boxShadow' 的行为相同...下面代码中的详细信息也

重现此问题的示例代码：https://stackblitz.com/edit/react-mui-2ybcce?file=svg.js