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

Posted 2023-03-15

【中文标题】如何在 ToggleButton 中选择时更改 SVG 图标颜色

【英文标题】：How to change SVG icon color on select in ToggleButton

【发布时间】：2021-12-14 10:38:57

【问题描述】：

我的项目中有 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;

【参考方案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 的类

【讨论】：

很遗憾没有工作

能否请您提供一个代码框来重现该问题，这将非常有帮助

我刚刚将添加到 ToggleButton 的类添加到主要问题中。也许会有所帮助

【参考方案2】：

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

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

【讨论】：

不工作，我相信一旦 SVG 图标在里面一定有添加的东西

@marcinb1986 你能在你的问题中添加图标定义吗？

这就是图标定义，希望这就是您要问的： import MenuIcon, LinesIcon, WheelIcon, ServisIcon from '@nevomo/shared'; export const StyledDetailsIcon = styled(MenuIcon)` margin-right: 1.3rem; `;

@marcinb1986 不，我想查看 MenuIcon 定义，而不是它的包装。

我已经编辑了帖子，希望是你问的这个