This was a tricky problem that I took a while to wrap my head around and implement.

Basically, I needed to change the font and background-color of a material UI button, when I hover over it.

The standard documentation was mainly to use className to change - which did nothing to the selected property. Because the specificity is lower. Using external CSS also fails due to lower specificity.

After fiddling around, I realized that this is the only way:

Step 1:

I’ll need to define makestyles as such:

1
2
3
4
5
6
7
8

const useStyles = makeStyles({
  root: {
    '&$selected': {
      color: "blue"
    }
  },
  selected: {} //Here, selected uses a jss-nested plugin to reference a local rule
})//    within the same stylesheet.

basically this compiles to .root-x.selected-x {color: blue;}; or, in my case, .makeStyles-root-1.makeStyles-selected-2, whose specificity is higher than the default one which is .MuiToggleButton-root.Mui-selected.

Step 2:

It’s crucial that I include both generated DOM names, root and selected

1
2
3
4
5
6

<ToggleButton value="left" aria-label="left aligned"
classes={{
  root:classes.root,
  selected: classes.selected
}}
>

For reference: the classes prop of the MUI component ‘use classes to provide an object that maps name of classes to override (.MuiToggleButton-root.Mui-selected) to css class names to apply. class.whatever (defined above)’