0
210
ViewsSet selected background-color of MUI ToggleButton
I'm unable to set the background color when the toggle button is selected. Right now, the buttons work but don't have any specific color when one is selected. I want to have a default color to the Btn 1 and if the user selects any other button, that button should get the default color.
<Grid container direction='column'>
<ToggleButtonGroup
value={title}
exclusive
size='small'
>
<ToggleButton onClick={this.handleOnClick}>
Btn 1
</ToggleButton>
<ToggleButton onClick={this.handleOnClick}>
Btn 2
</ToggleButton>
<ToggleButton onClick={this.handleOnClick}>
Btn 3
</ToggleButton>
</ToggleButtonGroup>
</Grid>
·
Juan Pablo Isaza
1 answers
Answer question0
Use &.Mui-selected selector to change the background color of the selected ToggleButton. You can see a list of state classes here:
import MuiToggleButton from "@mui/material/ToggleButton";
import { styled } from "@mui/material/styles";
const ToggleButton = styled(MuiToggleButton)({
"&.Mui-selected, &.Mui-selected:hover": {
color: "white",
backgroundColor: '#00ff00'
}
});
If you want to provide a selected color prop:
const ToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({
"&.Mui-selected, &.Mui-selected:hover": {
color: "white",
backgroundColor: selectedColor
}
}));
<ToggleButton value="left" selectedColor="#00abc0">
<FormatAlignLeftIcon />
</ToggleButton>
·
Juan Pablo Isaza
Report
Answer question