CODEWITHSUNDEEP
reactjsmaterial-ui
marcinb1986
marcinb1986

Reputation: 892

How to change color of not active button in ToggleButton from Material UI

I want to change the color of the not active button ToggleButton from Material UI to be darker, the default one is too light. I was thinking to use alignment and compare it to the ToggleButton value but I don't know how to catch the value.
Can You please advise how it should be coded? I went through the docs and didn't see any class or prop for it

<StyledToggleButtonGroup
    color="warning"
    value={alignment}
    exclusive
    onChange={handleAlignment}
>
    <StyledToggleButton
        aria-label={DetailsTranslation}
        onClick={() => handleGoToDetails()}
        value={`/trains/${idTrain}`}
    >
        <StyledDetailsIcon />
        {DetailsTranslation}
    </StyledToggleButton>
    <StyledToggleButton
        aria-label={HistoryTranslation}
        onClick={() => handleGoToHistory()}
        value={`/trains/${idTrain}/history`}
    >
        <StyledHistoryIcon />
        {HistoryTranslation}
    </StyledToggleButton>
    <StyledToggleButton
        aria-label={WheelsTranslation}
        onClick={() => handleGoToWheels()}
        value={`/trains/${idTrain}/wheels`}
    >
        <StyledWheelIcon />
        {WheelsTranslation}
    </StyledToggleButton>
    <StyledToggleButton
        aria-label={ServiceTranslation}
        onClick={() => handleGoToService()}
        value={`/trains/${idTrain}/service`}
    >
        <StyledServiceIcon />
        {ServiceTranslation}
    </StyledToggleButton>
</StyledToggleButtonGroup>

thanks

Upvotes: 0

Views: 629

Answers (1)

olscode
olscode

Reputation: 643

Hello I would try something like that:

StyledToggleButton : {
    color: red;
    background-color: blue;

}

I tried it in the website:

enter image description here

As i can see you are using styled components: otherwise you could try this code where you have your css element written:

import ToggleButton from '@mui/material/ToggleButton';
import styled from 'styled-components';


export const StyledToggleButton = styled(ToggleButton)`
 ......
 color: red;
 backgroundColor: blue;
    
`;

Upvotes: 2

Related Questions