如何在 ToggleButton 中选择时更改 SVG 图标颜色

Question

我的项目中有 4 个来自 MUI 的 ButtonGroup，其中每个按钮都有 SVG 图标和子项作为按钮的名称。虽然按钮和名称的背景一旦选择就可以工作，但 SVG 图标始终保持相同的颜色。如何使它工作并且 SVG 图标也会在选择时改变颜色？

下面是它的构建示例：

 <StyledToggleButtonGroup
                            color="warning"
                            value={alignment}
                            exclusive
                            onChange={handleAlignment}
                        >
                            <StyledToggleButton
                                aria-label={DetailsTranslation}
                                onClick={() => handleGoToDetails()}
                                value={Routes.TrainsDetails.path}
                                aria-pressed="true"
                            >
                                <StyledDetailsIcon />
                                {DetailsTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={LinesTranslation}
                                onClick={() => handleGoToLines()}
                                value={Routes.TrainsDetailsLines.path}
                            >
                                <StyledLinesIcon />
                                {LinesTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={WheelsTranslation}
                                onClick={() => handleGoToWheels()}
                                value={Routes.TrainsDetailsWheels.path}
                            >
                                <StyledWheelIcon />
                                {WheelsTranslation}
                            </StyledToggleButton>
                            <StyledToggleButton
                                aria-label={ServiceTranslation}
                                onClick={() => handleGoToService()}
                                value={Routes.TrainsDetailsService.path}
                            >
                                <StyledServiceIcon />
                                {ServiceTranslation}
                            </StyledToggleButton>
                        </StyledToggleButtonGroup>
                    </TrainsDetailsToolbarWrapper>

以及第一个按钮的样式：

 export const StyledToggleButton = styled(ToggleButton)`
        font-size: 1.6rem;
        font-weight: bold;
        font-family: Poppins;
        margin: 0.5rem;
        padding: 0.5rem 1rem 0.5rem 1.5rem;
        border-radius: 0.4rem;
        border: none;
    `;
    export const StyledDetailsIcon = styled(MenuIcon)`
        margin-right: 1.3rem;
    `;

这是 MenuIcon 的定义，是使用的图标的定义

/// <reference types="react" />
/// <reference types="react-dom" />

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & { title?: string }
  >;

  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
  const src: string;
  export default src;
}

Answer 1

ToggleButton 中的 a selected class 可以使用 styled、sx prop 或通过全局主题覆盖覆盖。

export const StyledToggleButton = styled(ToggleButton)`
  font-size: 1.6rem;
  font-weight: bold;
  font-family: Poppins;
  margin: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-radius: 0.4rem;
  border: none;
  &.Mui-selected .MuiSvgIcon-root {
    color: red;
  }
`;

export const StyledDetailsIcon = styled(MenuIcon)`
  margin-right: 1.3rem;
  color: blue;
`;

这是我检查时添加到 ToggleButton 的类

Answer 2

查看组件状态列表及其关联的类名here。

const StyledToggleButton = styled(ToggleButton)`
  &.Mui-selected {
    color: red;
    background-color: pink;
    /* Put your styles to apply in selected state here */
  }
`;