Блог

У меня в моем проекте 4 ButtonGroup из MUI, где у каждого из них есть значок 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;
    `;
 

это определение меню, используемых значков

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

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

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> amp; { 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;
}
 

В нем есть selected класс, ToggleButton который можно переопределить с помощью 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;
  amp;.Mui-selected .MuiSvgIcon-root {
    color: red;
  }
`;

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

это класс, который добавляется в ToggleButton, когда я его проверяю

Смотрите список состояний компонентов и связанные с ними имена классов здесь.

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