如何修改MUI ToggleButton选中状态下的SVG图标颜色

架构老林

2026-9-28

问题原因

你自定义的SVG图标样式没有绑定ToggleButton的选中状态，MUI的ToggleButton被选中时会自动添加.Mui-selected类名修改自身文字和背景色，但子元素SVG图标默认不会同步继承这个状态下的颜色值。

解决方案

方案1：调整图标样式继承父级选中状态颜色（推荐，代码改动最小）

直接修改你所有Styled图标的定义，增加父级选中时的颜色规则即可：

export const StyledDetailsIcon = styled(MenuIcon)`
  margin-right: 1.3rem;
  /* 父ToggleButton选中时修改图标颜色 */
  .Mui-selected & {
    /* 可以替换为你需要的任意色值，也可以从theme中取对应颜色 */
    color: ${({ theme }) => theme.palette.warning.contrastText};
  }
`;

如果你的SVG图标没有默认使用currentColor作为填充色，需要额外加fill规则强制同步：

export const StyledDetailsIcon = styled(MenuIcon)`
  margin-right: 1.3rem;
  fill: currentColor; // 强制让SVG填充跟随当前元素的color属性
  .Mui-selected & {
    color: #fff;
  }
`;

其余的StyledLinesIcon、StyledWheelIcon、StyledServiceIcon全部按照同样的规则修改即可。

方案2：通过选中状态动态传入color属性

如果你不想批量修改样式定义，也可以在业务代码中通过判断当前选中值和按钮value是否匹配，动态给图标传入color属性：

<StyledToggleButton
  aria-label={DetailsTranslation}
  onClick={() => handleGoToDetails()}
  value={Routes.TrainsDetails.path}
>
  <StyledDetailsIcon color={alignment === Routes.TrainsDetails.path ? "warning" : "inherit"} />
  {DetailsTranslation}
</StyledToggleButton>

该方案需要给每个图标都添加判断逻辑，更适合仅需个别图标特殊处理的场景。