重复问题

• 我已搜索现有的问题

最新版本

• 我已测试了最新版本

重现步骤 🕹

链接到实时示例： https://codesandbox.io/s/silent-wave-qm963x?file=/src/Demo.js
实时示例是对文档示例的轻微更改，演示如何使用SvgIcon。
https://mui.com/material-ui/icons/
步骤：

1. 使用@mui/material@5.13.6或更高版本
2. 创建一个自定义SVG图标组件
   const SvgIconChildren = (props) => { return ( <SvgIcon {...props}> {/* credit: plus icon from https://heroicons.com/ */} <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="m2.46,14.35c.01-2.46.76-4.03,2.17-5.42l5.22-5.33,5.22,5.4c1.4,1.38,2.16,2.89,2.17,5.36H2.46Zm14.36-7.39L9.85,0,2.88,6.96c-1.92,1.92-2.88,4.48-2.88,6.95s.96,5.06,2.88,6.98c1.92,1.92,4.45,2.89,6.97,2.89s5.05-.97,6.97-2.89c1.92-1.92,2.88-4.52,2.88-6.98s-.96-5.03-2.88-6.95Z" /> </svg> </SvgIcon> ); }; export default SvgIconChildren;
3. 实现带有颜色覆盖的SvgIcon组件
   <SvgIconChildren sx={{ color: pink[500] }} />

当前行为 😯

图标的颜色没有更新为覆盖中指定的值。

预期行为 🤔

预期颜色覆盖
在沙箱中，我确认将@mui/material的版本恢复到5.13.5或更早版本可以提供预期行为。

上下文 🔦

我们正在对我们的图标进行样式设计，以向我们的用户传达状态信息。这导致了一个破坏性的变化，因为我们尝试更新到最新的材料从5.11.16,并发现我们的许多图标卡在一个默认颜色(有时与背景颜色相同)。计划运行5.13.5,直到问题解决或提供正确实现SvgIcon的方法。

你的环境 🌎

npx @mui/envinfo

Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 119.0.6045.160
    Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.93)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.1
    @emotion/styled: ^11.10.6 => 11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/icons-material: ^5.11.11 => 5.14.18
    @mui/lab: ^5.0.0-alpha.123 => 5.0.0-alpha.153
    @mui/material: ^5.13.5 => 5.13.5
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @types/react:  18.2.39
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.9.5