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

user_8430249 0
Viewed 1767

I'd like to change the selected <ToggleButton ... /> color to my theme primary, but I'm struggling to make it happen.

Here is my code, which fails to change the color to primary at all:

...
import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'
...
const useStyles = makeStyles((theme) => ({
  selected: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.main,
  },
}))
...
...
<ToggleButtonGroup
        value={toggleIndex}
        exclusive
        size='large'
        color='primary'
        onChange={handleFileToggle}
        classes={{ selected: classes.selected }}
      >
        <ToggleButton value={pdfIndex} color='primary'>
          PDF
        </ToggleButton>
        <ToggleButton value={1}>Image</ToggleButton>
      </ToggleButtonGroup>

I read how to pass down classes but I must not be doing it correctly. Any ideas?

Here is the ToggleButtonGroup source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js

material-ui reactjs
1 Answers

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.

user_112471750
Related