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

[jackControls]

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

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

See https://material-ui.com/customization/components/#pseudo-classes

[jackControls]

Sorry, to raise a dumb 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

[oliviertassinari]

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

[montogeek]

@oliviertassinari May I ask how v5 API will solve it?

[oliviertassinari]

By forcing to increase the specificity.

[mbrookes]

See also: #23755 – we may add a prop for this.