How to style ToggleButon in material-ui

user_5995696 0
Viewed 106

I'm trying to style ToggleButton to override default color when it's selected. But it doesn't work.

const useStyles = makeStyles((theme) => ({   
  toggleButtonSelected: {
      "background-color": "red"
  }
}))

.......
<ToggleButtonGroup exclusive>
    <ToggleButton
        classes={{ selected: classes.toggleButtonSelected }}
        value="a" >
        Button A
    </ToggleButton>
    <ToggleButton
        classes={{ selected: classes.toggleButtonSelected }}
        value="b">
        Button B
    </ToggleButton>
</ToggleButtonGroup>
material-ui reactjs css
1 Answers

Solution

Try to change your makeStyles styling to the following:

const useStyles = makeStyles((theme) => ({
  toggleButtonSelected: {
    "&.MuiToggleButton-root": {
      "background-color": "red"
    }
  }
}));

Edit on Code Sandbox

Explanation

Original specificity

Your original makeStyles styling is not working because it generates a CSS rule with selector of .makeStyles-toggleButtonSelected-1 (circled in red in the above screenshot), which is overridden by another rule with higher specificity.

With our new makeStyles styling, it generates a CSS rule with the selector having a higher selectivity than your original styling (circled in red in below). This new styling can successfully override the default styling.

New specificity

user_110674960
Related