[Lab] ToggleButton Style backgroundColor override when selected={true}

We tried to override the background color when ToggleButton is selected. We found that no matter how we try, the background color would be controlled by .MuiToggleButton-root.Mui-selected:hover We are sure that we targeted the right selected Pseudo-class successfully by adding a border around each button when selected.

Our ToggleButton looks like this:

<ToggleButton 
  classes={{
    root: classes.buttons, 
    selected: classes.buttons_selected
  }}
  value='PayPal'
  selected={selectedButton==='PayPal'}
  onClick={()=>{setSelectedButton('PayPal')}}
>

Our makeStyle:

const useStyles = makeStyles(theme => ({  
    buttons: {
        border: '1px solid #9B9B9B',
        borderRadius: 5,
        marginBottom: 5,
        marginTop: 5,
        height: 56,
        width: '100%',
        justifyContent: 'space-between',
    },
    buttonsselected: {
        border: '2px solid #4955C0',
        "&:hover": {
            backgroundColor: 'transparent'
        }
    },
}));

And in Chrome Dev we found the following styles generated by our code

.makeStyles-buttonsselected-27:hover {
    background-color: transparent;
}

being overrided by the following:

.MuiToggleButton-root.Mui-selected:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

We would like to be able to easily override the background color of ToggleButton when it is selected .

Motivation 🔦

Make it a more easier to use element of Material UI

[oliviertassinari]

@mbrookes Looks like the exact same question you asked me yesterday. I’m glad v5 API, by design, solve this issue.

[montogeek]

@trcloud How did you solve this issue?

Edit: Solved by adding the empty selected: {} property to the styles declaration as the docs say: https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet