• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

ToggleButton is currently styled under the assumption it will be used within a ToggleButtonGroup. This makes it difficult to customize styles if ToggleButton is to be used without being in a group.

Styles found in ToggleButton that are specific to a ToggleButtonGroup context:

• padding: 0px 11px 0px 12px
• &:not(:first-child) {...}
• &$selected & + & {...}
• &:first-child {...}
• &:last-child {...}
• sizeSmall padding: 0px 7px 0px 8px
• sizeLarge padding: 0px 15px 0px 16px

Expected Behavior 🤔

ToggleButton should be easy to style for both single use and group use.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-styling-individual-togglebutton-vs-in-a-group-5i0ly

Context 🔦

I guess I'm creating this issue to open a discussion about whether or not ToggleButton is intended to be used standalone, i.e. not within a ToggleButtonGroup.

I personally would like to use a single ToggleButton in my app to toggle a boolean. My current options are to either

1. replicate ToggleButton as an app-specific SingleToggleButton that doesn't have group-specific styles, or
2. utilize Material-UI ToggleButton and try to override the group-specific styles using some nasty specificity hacks or !important. It's currently not so easy to override considering I am using ToggleButton both on its own and within a ToggleButtonGroup in my app.

Where to go from here:

Decide if ToggleButton can be used outside of a ToggleButtonGroup. If no, clearly indicate in docs that it's not intended as such.

Otherwise,

I would like to split ToggleButton in to two distinct components: SingleToggleButton and GroupToggleButton. (naming is just an example.. maybe there are better names.) The advantage of this is that users can style the two independently without worrying about how styling one will affect the other.

An alternative that I don't like is to create GroupToggleButton by simply wrapping ToggleButton. It just declares a new className with group-contextual styling. The disadvantage of this is that when users customize styling of the ToggleButton, they will have to worry about making sure it doesn't mess up how the buttons look when used in a group context.

Another alternative would be to move the group-specific styles into ToggleButtonGroup, effectively targeting .MuiToggleButtonGroup-root .MuiToggleButton-root to declare group-contextual styling. This has the same disadvantage as above though, where one custom style on ToggleButton could negatively impact usage in a group. (see border-radius example in my CodeSandbox link above.)

Your Environment 🌎