reactjs – How to change react Material-UI ToggleButton Color (for selected)

reactjs – How to change react Material-UI ToggleButton Color (for selected)

The ToggleButtonGroup has no selected rule name, see API docs. You need to apply your styles to the ToggleButton component and also bump the specificity a bit:

const useStyles = makeStyles((theme) => ({
  selected: {
    &&: {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.secondary.main
    }
  }
}));
<ToggleButton value={pdf} classes={{ selected: classes.selected }}>
  PDF
</ToggleButton>
<ToggleButton value={image} classes={{ selected: classes.selected }}>
  Image
</ToggleButton>

On a related note, unless you are using the v5 pre-release, neither ToggleButtonGroup nor ToggleButton accept a color prop.

reactjs – How to change react Material-UI ToggleButton Color (for selected)

Leave a Reply

Your email address will not be published.